rails:assets:precompile adds the proper tailwind classes but calling bin/dev (rails tailwindcss:watch) doesn't

Question

I'm not sure what the issue is but I'd love to understand what I'm doing wrong. Whenever I need to add a new class I'm expecting bin/dev to be able to load and add the classes ie: w-20 however, it doesn't and right now the only thing I'm able to get working is calling rails:assets:precompile.

I'm using gem "tailwindcss-rails" and it has been working before. I'm not getting any errors when starting. Here's my config/tailwind.config.js

const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = {
  important: true,
  content: [
    "./app/helpers/**/*.rb",
    "./app/javascript/**/*.js",
    "./app/views/**/*",
    "./app/components/**/*",
    "./app/views/**/*.{erb,haml,html,slim}",
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ["Inter var", ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [
    require("@tailwindcss/forms"),
    require("@tailwindcss/aspect-ratio"),
    require("@tailwindcss/typography"),
    require("daisyui"),
  ],
  daisyui: {
    styled: true,
    themes: true,
    base: true,
    utils: true,
    logs: true,
    rtl: false,
    prefix: "",
    darkTheme: "dark",
  },
};

my Procfile for bin/dev is

web: bin/rails server -p 3000
css: bin/rails tailwindcss:watch
js: yarn build --watch

app/assets/stylesheets/application.tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

.profile-name {
  @apply mb-4 text-4xl;
}
h1 {
  @apply mb-3 text-3xl;
}
h2 {
  @apply mb-3 text-2xl;
}
h3 {
  @apply mb-3 text-xl;
}

th {
  @apply px-6 py-4 text-gray-900 border;
}
table {
  @apply min-w-full p-4 text-center border;
}
tr {
  @apply px-4;
}
td {
  @apply p-1 text-gray-900 border whitespace-nowrap;
}
form {
  @apply mb-5;
}
ul li {
  @apply list-disc list-inside;
}
ol li {
  @apply list-decimal list-inside;
}

app/assets/stylesheets/application.css

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

manifest.js

//= link_tree ../images
//= link_directory ../stylesheets .css
//= link_tree ../builds

I'm not sure what else to link, but thank you in advance for your help!

Answer 1

I had similar issue in the past and rails assets:clobber worked for me.