Skip to content

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Style output via tailwindcss-rails gem appears off when compared to other build options #15426

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
phillipspc opened this issue Dec 17, 2024 · 4 comments

Comments

@phillipspc
Copy link

What version of Tailwind CSS are you using?

v3.4.16

What build tool (or framework if it abstracts the build tool) are you using?

the tailwindcss-rails gem

What version of Node.js are you using?

N/A

What browser are you using?

Issue seems browser agnostic, but I've tested Safari and Firefox

What operating system are you using?

macOS

Reproduction URL

Repo with minimal amount of changes to reproduce the issue here: https://github.com/phillipspc/railstailwind

Describe your issue

It looks like something is off in how styles are compiled via the tailwindcss-rails gem. When comparing the same HTML with the same utility classes against a Rails project building with Vite (minimal repo here), that styling looks correct there, but wrong in the gem version.

Here's a screenshot of a copy/pasted TailwindUI component:
image

I opened this issue originally on the gem's GitHub page, however according to the maintainer:

There's no magic in this gem, it's just running the upstream tailwindcss CLI against the generated tailwind config.

So it seems like whatever is breaking things in the gem is happening "upstream". This issue was first reported on December 5th.
I'm wondering if anyone from the Tailwind team would have a better idea, given that timing, of what might have changed that would introduce a downstream issue with the tailwindcss-rails gem.

Any help is much appreciated, and if I can assist in providing any better reproduction/troubleshooting steps, I'm happy to do so!

@adamwathan
Copy link
Member

Hey! I'm guessing it's this:

https://github.com/rails/tailwindcss-rails/blob/8a8dbd80b51c00ed54051bf6e125601c42c60b82/lib/install/tailwind.config.js#L18

The Rails gem is enabling the forms plugin by default which Tailwind UI doesn't expect and results in clashing styles.

@phillipspc
Copy link
Author

phillipspc commented Dec 17, 2024

@adamwathan Thanks so much for the response! I've confirmed that ditching the forms plugin gets things looking as expected in my project. 🤘

I'm wondering what this means for the Rails gem. Is it accurate to say that it shouldn't be adding any of those plugins by default? Would that get it more in-line with the defaults of other build tools?
Or is it more accurate to say that TailwindUI users just need to be aware of what plugins they’re using? 🤔

@adamwathan
Copy link
Member

Yeah personally I don't think any of those plugins should be in there and enabled by default, that's not the same experience you get when you initialize a Tailwind project outside of Rails and we don't actually use any of those plugins on our own projects. Should be opt-in for sure 👍

@phillipspc
Copy link
Author

@adamwathan yup, that all checks out. I’ll pass that along and we can hopefully make that change to the gem in the near future. Thanks!

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants