Why Aren't New TailwindCSS Classes Compiling Automatically in Rails Development?

It sounds like your setup is working as intended in production, but the development build isn’t automatically picking up new Tailwind classes as expected. By design, the tailwindcss-rails gem provides a watch process (triggered by the procfile’s "css" line) to regenerate the CSS as you work, so you shouldn’t need to run assets:clobber/assets:precompile manually in development.

Here are a few things to check:

1. Tailwind Config “Content” Paths

   Make sure that your tailwind.config.js file correctly lists all the directories where you add your Tailwind classes. For example, you should have something like:

   JSCopied
   module.exports = {
     content: [
       "./app/views/**/*.{html,erb}",
       "./app/helpers/**/*.rb",
       "./app/javascript/**/*.js",
       // add any other directories (e.g. components or partials) where your classes are used
     ],
     theme: {
       extend: {},
     },
     plugins: [],
   }

   If a file where you add a new class isn’t matched by a path here, Tailwind’s purge mechanism might remove that class during the build process.

2. Ensure the Watch Process Is Running

   Verify that the CSS watcher (triggered by yarn build:css --watch) is running in your development environment. If that process isn’t active or gets interrupted, changes you make won’t trigger a rebuild. You can check your terminal or process manager for that.

3. Browser Cache

   Sometimes, your browser might cache the old CSS. Try doing a hard refresh or clearing the cache to ensure you’re loading the latest changes.

4. Development vs Production Environment

   In production, the build process might be less aggressive in purging or caching, so you see the new classes once assets are precompiled. In development, if the watcher isn’t correctly detecting changes (possibly due to a misconfiguration or an environment variable issue), you’ll run into the problem you’re describing.

If the “css” service in your Procfile really is running (and it usually is, thanks to tailwindcss-rails), then no, you aren’t doing anything wrong—the issue lies in ensuring that:

• The watcher process is running uninterrupted.
• Your tailwind.config.js includes all the necessary file paths.

Once you adjust these, new classes should appear without needing to run assets:clobber and assets:precompile manually in development.