Some tailwind styles not working out of the box in rails 7

[jinfiesto]

I have noticed that several tailwind styles are not working out of the box in rails 7. I have been using tailwindui components in a rails 6 project and in the process of upgrading to rails 7 seem to notice many of my styles are broken. Am I doing something wrong? This repository has an example, you can see the shadow class doesn't seem to apply, though many of the layout classes seem to work ok:

https://github.com/jinfiesto/tailwind-rails-bug

[jordanful]

I noticed this too. Not sure if it's unique to me, but some of the margin styles were not applying (i.e. mr-2), though somewhat intermittently. I'm also on Rails 7.

[dixpac]

Hey @jinfiesto! Thanks for the demo repo.

I've pulled your repo and run it. Everything works fine for me

Are you booting up with bin/dev (foreman)?
If it is not to much to ask can you send me the content of your app/assets/builds/tailwind.css 😄

[jordanful]

Hi @dixpac. In case it is helpful, here is my tailwind.css file.

I've noticed a few more styles not working out of the box consistently: text-sm, w-14 or h-14, and border-2. Hope this helps.

(edit: removed css file for posterity + readability)

[dixpac]

No sure why it is not working for you, since as you can see in your tailwind.css output you have all the classes you have mentioned 🤔

[jordanful]

Thanks, yeah, so that's the file in my repo. But what get's generated and served in the application is below (sorry, I should have included this above!). You'll see that there is a lot missing.

(edit: removed CSS file for posterity and readability)

[jinfiesto]

Hi, sorry it took a second to get back. I didn't realize I needed to start the project up using bin/dev. Missed the section of the readme suggesting it.

[jinfiesto]

So, while this has resolved the issue presented in the test repo, I am now realizing that maybe it is not possible for me to upgrade my rails 6 app without excising tailwindcss and including tailwind in some other fashion. I see in the README, that tailwindcss does not support dynamic classnames.

I use viewcomponents in another project. ViewComponents allow you to create componentized views with their own templates. I was previously using tailwindcss and it worked fine in my rails 6 project. After starting my project with bin/dev, it doesn't seem that any tailwind classes which I use in the viewcomponent templates are being added to the built tailwind output. Is it possible to get tailwindcss to look at those files or am I out of luck?

[jordanful]

I start the project using .bin/dev and 30-50% of classes are still missing in the compiled tailwind.css. Would be thrilled if anyone has any pointers, or please let me know if I can provide more context than the (really long, sorry) css files above.

[dixpac]

@jinfiesto did you configure tailwind config to look at the view component template files https://github.com/rails/tailwindcss-rails/blob/main/lib/install/tailwind.config.js#L5?

@jordanful sure provide as much context as you can, there is not enough context atm on why this doesn't work for you, while it is working fine for the majority of other folks using the engine :) I'm glad to help if I can :)

[jordanful]

@dixpac many thanks for the attention.

The fix for me: I ran rails assets:clobber and restarted the app. Now, all the classes are there. All good from my side.

[jinfiesto]

Thanks @dixpac, I was being dumb. Your suggestion resolved the issue. Going to take a second to get used to this setup. Have been used to having all of tailwind available all the time.

[jordanful]

fwiw, I'm still encountering this every now and then. The fix above works, but thought I'd mention it.