Skip to content
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

tailwind.css file is not being updated in Rails 8 with tailwindcss-ruby 4.0.0.alpha27 #419

Open
pinzonjulian opened this issue Oct 17, 2024 · 10 comments · Fixed by #420
Open

Comments

@pinzonjulian
Copy link

Whenever I update the app/assets/stylesheets/application.tailwind.css file, the corresponding output file at app/assets/builds/tailwind.css does not update.

The process seems to be doing something:

image

But the changes are not being picked up. Notice the execution time on the watcher vs the updated timestamps on the file:

Screenshot 2024-10-17 at 11 21 24 PM

The only way to get this to work is to delete the file, stop the watcher (i.e. bin/dev in a rails app) and run the watcher again.

I created an app to try out the new setup and experiment on Tailwind v4. The only notable thing about it is that I removed the tailwind.config.js file since it's not supposed to be needed in Tailwind v4. I tried adding it back and that did not resolve the issue.

https://github.com/pinzonjulian/tw4-experiments

Gem versions
tailwindcss-rails (3.0.0)
tailwindcss-ruby (4.0.0.alpha.27)
rails (8.0.0.beta1)

Running on macOS Sonoma 14.6.1

@flavorjones
Copy link
Member

Thanks for opening this issue. I haven't tried using the new alpha releases yet, but I'll take a look as soon as I can.

@flavorjones
Copy link
Member

Ah! Tailwindcss 4 is trying to be much smarter about detecting files, but it looks like if the -i argument is given then it ignores any other files.

Should be a pretty easy thing to fix ... I will create a draft branch and maybe you can try it out and let me know if it works.

flavorjones added a commit that referenced this issue Oct 17, 2024
which doesn't need a config file or an input file anymore.

Closes #419
@flavorjones
Copy link
Member

@pinzonjulian Can you try out the branch from #420 and let me know what you think?

@flavorjones
Copy link
Member

Responding to your comments on #420 ...

I believe it's even introduced some regressions

I'm not sure how anything can regress from "file doesn't get generated" 🤣, but I understand that it's not working for your use case.

In #420 I removed the -i app/assets/stylesheets/application.tailwind.css because it seemed like its presence was preventing the CLI from generating the output file ... I'll double check and if that's the case I can report a bug upstream.

I added some tests in #420 that ensure CSS is generated appropriately for scaffolds (in the user journey test). Can you suggest an assertion we can add there that would be meaningful for your use case?

Are you able to figure out a command line (not relying on this gem) that would accomplish what you want with the v4 alpha CLI? (You can run bin/rails tailwindcss:build[verbose] to see what the command being run by this gem.)

@flavorjones
Copy link
Member

OK, I'm digging back into your report and ... I misunderstood, and my local testing was still using v3 syntax in the application.tailwind.css file. Sorry for the confusion.

It sounds like you're saying that the CSS was being generated correctly, but that "watch" isn't updating? I've confirmed that I see that behavior locally, too. Can I ask you to report this upstream? You can use the bin/rails tailwindcss:build[verbose] to describe what the command is that's being run.

In the meantime, I'll revert the change that broke handling of application.tailwind.css, give me a few minutes.

@flavorjones
Copy link
Member

flavorjones commented Oct 18, 2024

See #423 which includes proper testing for v4 application.tailwind.css.

@flavorjones
Copy link
Member

It sounds like you're saying that the CSS was being generated correctly, but that "watch" isn't updating?

Interestingly, if I put something like this in my application.tailwind.css:

@import "tailwindcss";
body {
   background: #00aa00;
}

and I change the background color, then everything works fine for me when I watch. So if you're seeing something different with @theme and/or variables, then I'm guessing it's a bug upstream.

@flavorjones
Copy link
Member

@pinzonjulian I've merged #423 which should fix the regression from #420. At this point, I think the issue you're describing is from the upstream tailwindcss executable ... does that sound like a correct diagnosis? If not, what am I missing?

@pinzonjulian
Copy link
Author

Thanks for that @flavorjones !

I've tested the reverted changes and it's working back to where it was. I do agree that there's something going on with the watch command. I tried updating the css file with the @theme directive in watch mode and it doesn't work. However if I try to manually run the build command it does update the output stylesheet. I'll do some more testing and let you know if I find anything and if I end up creating an issue upstream.

What do you think about adding a test for the watch command in the integration test as well?

@pinzonjulian
Copy link
Author

You were spot on with your assessment @flavorjones. I tried the standalone CLI without Rails and indeed the --watch feature is not working on their end. I've created an issue in Tailwind.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants