Tailwind styles don't work in a Phlex component

[javid-gulamaliyev]

In an attempt to convert some erb to Phlex I ran into issues with Tailwind. Phlex has been installed with the rails installer, I have validated my tailwind.config.js contains the view path and .rb extension.

Searching through other issues, I couldn't find anything relevant. I am still using application.html.erb as layout and have <%= stylesheet_link_tag "tailwind" %> within it and all tailwind styling works in erb files.

Any ideas or things I may have missed?

[joeldrapper]

Hey, it sounds like you’re running into an issue with the Tailwind JIT where it’s not finding your Tailwind classes in Phlex .rb files. Could you confirm that the JIT is running correctly by adding one of the missed classes to a .html.erb file and confirming that the JIT picks it up?

It would help if you could make a quick sample app that reproduces this because it could be any number of things.

[javid-gulamaliyev]

You are absolutely right, If I add equivalent styles to the .erb files, they get picked up and rendered correctly in the Phlex components!

Is there a way to fix this without having to add styles to an .erb? I can put together a sample app, it really is just a Rails 7 app, using tailwind and esbuild.

[joeldrapper]

The way to fix it is to tell Tailwind to look in your .rb files for those classes. The generator includes the configuration change but it’s possible it didn’t work for you.

This should be covered by your tailwind.config.js file. This is the contents of mine:

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

This first line should apply to any .rb file inside the app/views directory.

[javid-gulamaliyev]

Ah, I think I finally got to the bottom of it. My taiwind.config.js did have the required config (which is why I was confused)

module.exports = {
  darkMode: 'class',
  content: [
    './public/*.html',
    './app/views/**/*',
    './app/helpers/**/*.rb',
    './app/views/**/*.{html.erb,turbo_stream.erb,rb}',
...

But it looks like my project had two tailwind config files, one in root directory and one under /config. The second one did not have the required .rb format included. Consolidating the two files fixed things, thanks for your help!