tailwindcss-rails is corrupting styling

[ghost]

This morning I came to find my styles had been broken. I couldn't for the life of me figure out what was wrong. I ended up generating a new Rails app with the --css tailwind flag to see if this was a project-specific issue. It was not. I ran into the same issue again and again. (No, I didn't change settings).

I then generated a vanilla Rails app and used the Tailwind CDN instead. This worked without any issues. And so the culprit seems to be with tailwindcss-rails. I just don't know what's triggering it.

I attached two screenshots — the same component but one uses tailwindcss-rails and the other uses the CDN.


As you can see, the CDN is accurate, whereas tailwindcss-rails has broken the styling.

For reference, this component is from https://tailwindui.com/components/application-ui/forms/form-layouts if you want to copy and paste and try it yourself. I'd be curious if anyone else has the same issue and if so how to fix it. Of course, the Issue is not only with this form but with all other components.

Thank you kindly.

[flavorjones]

@HidekoCodes Thanks for opening this issue, and sorry that you're having this problem. We really need more information from you in order to investigate, though. Ideally enough to reproduce what you're seeing.

What versions of tailwindcss-rails and tailwindcss-ruby are you using? What does it mean to "use the Tailwind CDN"? Can you share your code in a public repository?

[ghost]

@flavorjones Thanks for getting back to me. I'm using Rails 8.0.0 and tailwindcss-rails 3.0.0. I used the --css tailwind flag to setup the project and didn't change any settings. I also tried manually installing tailwindcss-rails using this guide (https://tailwindcss.com/docs/guides/ruby-on-rails) but still ran into the same issue.

The CDN is the official TailwindCSS CDN: https://tailwindcss.com/docs/installation/play-cdn. When using the CDN everything works as intended. Whereas tailwindcss-rails breaks the styling. As in the example I shared above.

I just came back after a week break. Before that everything was working fine. I've tried this on multiple machines btw so the issue seems to be with the gem. But I'm unable to pinpoint further.

[flavorjones]

@HidekoCodes Again, without a clear and easy reproduction it will be difficult for me to help.

Please understand that this gem doesn't really do anything except run the tailwindcss CLI tool which is provided by the upstream tailwindcss project. It's possible that the behavior differences you're seeing are between the CDN and the CLI tool. But I can't be sure without a clear and easy reproduction.

[ghost]

@flavorjones Thanks for the reply. Sorry, I didn't reproduce the first time around. Here we go. Hope this helps. I committed each step and included said steps in the README. If you need anything else please let me know.

1. The gem version: https://github.com/HidekoCodes/repro_tailwindcss-rails
2. The CDN version: https://github.com/HidekoCodes/repro_tailwindcss-cdn

P.S. You mentioned that "It's possible that the behavior differences you're seeing are between the CDN and the CLI tool." I doubt this. As tailwindcss-rails was working just last week.

[flavorjones]

Thanks for packaging up the repro. I tried rendering with versions of tailwindcss-rails back to 2.1.0 and at no point does it render the same way the CDN renders it. Are you sure it was working earlier with no other changes to the app?

I'm not sure how to explain the differences between tailwindcss-rails and the CDN, because the CDN is a black box. But maybe it will help to explain what the tailwindcss-rails gem does ...

If you run bin/rails tailwindcss:build[verbose] you'll see what's happening, which is that the gem runs the "tailwindcss" CLI against the project:

$ bin/rails tailwindcss:build[verbose]
["/usr/local/bundle/gems/tailwindcss-ruby-3.4.16-x86_64-linux/exe/x86_64-linux/tailwindcss", "-i", "/repro_tailwindcss-rails-mount/app/assets/stylesheets/application.tailwind.css", "-o", "/repro_tailwindcss-rails-mount/app/assets/builds/tailwind.css", "-c", "/repro_tailwindcss-rails-mount/config/tailwind.config.js", "--minify"]

There's no magic going on, and the only difference I know about between this gem and the CDN is the presence of the "Inter" font in application.html.erb. If there are differences between this gem and the CDN, then there are differences between the Tailwind CLI and the Tailwind CDN.

And again, I've tried multiple versions of the CLI going back to tailwindcss-rails v2.1.0 which packaged Tailwind CLI v3.4.0, and it looks like they all render consistently.

At this point, I'm stumped. Hopefully I've given you enough information to perhaps dig a little deeper, or maybe someone else has an idea.

One last thought: does the CDN include some plugins that you're relying upon that aren't packaged with the Tailwind CLI?

[flavorjones]

Looks like the account who created this issue no longer exists, but in any case the answer to this question was found by @phillipspc in #443: the default config/tailwind.config.js file generated by this gem includes the "forms" plugin, and that's what's causing the issue.

Removing the plugins from your project's config will fix the styling weirdness.