Many tailwind classes missing

[karansapolia]

I created a new rails 7 application using the command:

rails new demoApp -j esbuild --css tailwind

which executed successfully and I was happily working on my React-on-Rails application using ./bin/dev. The only issue I noticed was that most tailwindcss classes were missing. I couldn't use simple classes like m-4, mx-5, font-extrabold.

On checking I noticed that very few classes were present in the generated ./app/assets/builds/application.css file and almost all classes I regularly use were missing.

Could someone guide on what could be the reason behind this, or what could I be doing wrong?

[mweitzel]

This is likely due to the way it purges classes instead of just minifying. On a new project things will feel like they're missing when you really need a rebuild.

When you say a class like m-5 is missing. Is it missing when you edit the html in the browser of a loaded page? Or is present in your html file and still missing after a rebuild of the css? (remember This setup requires a separate watch process to run)

[karansapolia]

When you say a class like m-5 is missing. Is it missing when you edit the html in the browser of a loaded page? Or is present in your html file and still missing after a rebuild of the css? (remember This setup requires a separate watch process to run)

The classes are present in the html in the loaded page in the browser, but the styles it should apply according to tailwindcss (ex: m-5 adds a margin: 5px style to the element) are not being applied. Also, I can't find these classes in the generated ./app/assets/builds/application.css file. Only the css classes visible in that file are getting applied.

When you're developing your application, you want to run Tailwind in watch mode, so changes are automatically reflected in the generated CSS output. You can do this either by running rails tailwindcss:watch as a separate process, or by running ./bin/dev which uses foreman to starts both the Tailwind watch process and the rails server in development mode.

According to this paragraph from the readme, ./bin/dev should run the separate watch process, but even on stopping and re-running ./bin/dev, most tailwind classes are not being applied.

[karansapolia]

I think I've found the issue.

So, it seems like once the page has been rendered, if you add a new tailwindcss class that is not already present in the outputted app/assets/builds/application.css file, tailwindcss-rails should rebuild the application.css file with the newly added tailwind class present.

This does not happen if I add a new tailwind class to my .jsx / .js file.
That is, the rebuild step is not taking place on making changes to a .jsx or .js file.
I don't know if esbuild is responsible for this or just tailwindcss-rails.

If I add a new tailwind class to any index.html.erb file, then the rebuild step takes place and a new app/assets/builds/application.css file is generated with the new tailwind class added to it.

I am attaching a loom video to showcase what's happening:
https://www.loom.com/share/8bbbc354427b41bbbd4e117a0740804e

I've also noticed that after simply creating a new rails project using this command: rails new demoApp -j esbuild --css tailwind,
if I run rails --tasks in the commandline and try to check for rails tailwindcss:watch,
there are no tailwindcss tasks.
This shouldn't be the case if I am setting tailwind as the css library while creating the rails application:

[mweitzel]

Just watched the video. So the first "file built" was yellow, which is your js/jsx watcher, and the second "file built" is green, which is the css watcher. Check your tailwind.config.js file, if it is not present (defaults) if you add add "./app/javascript/**/*.jsx" to the purge array. Then changing these files should also trigger the css watcher, and strings present in those files should be included.

• edited - add a purge entry for .jsx, not .js, as .js should present in the defaults.

[karansapolia]

The contents of my tailwind.config.js file are:

module.exports = {
  content: [
    './app/views/**/*.html.erb',
    './app/helpers/**/*.rb',
    './app/javascript/**/*.js'
  ]
}

These are the default contents. Haven't touched or changed them in any way.

Just watched the video. So the first "file built" was yellow, which is your js/jsx watcher, and the second "file built" is green, which is the css watcher.

Exactly. Shouldn't the css watcher run again if classname changes are made in a .jsx file? They are running for similar changes made in a .html.erb file though.

[karansapolia]

Adding ./app/javascript/**/*.jsx to the content array in tailwind.config.js did the trick.
Now both the js watcher and the css watcher are running on making changes to a .jsx file.

Thank you!

[dixpac]

@karansapolia glad you managed to solve the problem.
When you generate new rails app with esbuild and tailwind rails new demoApp -j esbuild --css tailwind
the app doesn't use this gem, it uses tailwind as a postcss plugin.

This engine serves the tailwind without the need for node based bundlers.

[karansapolia]

Ah, I assumed tailwindcss-rails must be handling the css. Thanks for the info @dixpac. 🙂