Migrate to tailwind v4 #8640
Migrate to tailwind v4 #8640
Conversation
c7ca18a to
187fe37
Compare
|
Thanks, during the process, can you please check if #8574 will be fixed or if we need to merge that? |
|
Sure! Thanks for the reminder. Are you aware of other issue / topic like that? |
|
I will take care of #8574 since I need to address other related styles that aren't complete. I will get to it. Please be patient. |
28d68a6 to
3bfb95e
Compare
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #8640 +/- ##
=======================================
Coverage 99.11% 99.11%
=======================================
Files 141 141
Lines 4073 4073
=======================================
Hits 4037 4037
Misses 36 36 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
| @@ -8,7 +8,7 @@ def install_assets | |||
| remove_file "app/assets/stylesheets/active_admin.scss" | |||
| remove_file "app/assets/javascripts/active_admin.js" | |||
| template "active_admin.css", "app/assets/stylesheets/active_admin.css" | |||
| template "tailwind.config.js", "tailwind-active_admin.config.js" | |||
| template "tailwind.config.js", "tailwind-active_admin.config.mjs" | |||
There was a problem hiding this comment.
I'm hesitant to do this. What did you run into that you had to make this change? Wouldn't the original version just be treated as an ESM file by the host app as expected? Was there a warning or error by loading this in the new approach from the CSS file now?
There was a problem hiding this comment.
I reverted the change. I'm getting a console warning when I compile the CSS using node 20.x. It's safe to trust that apps are type module nowadays (or wait for issues)
There was a problem hiding this comment.
Thanks! Hmm that's strange because we do set it in our package.json file.
Line 6 in be13072
There was a problem hiding this comment.
That's our package.json, the problem is the test_app. I can't point out who generates that package.json. It could be jsbundling-rails
This reverts commit 3bfb95e.
You are right, it was a nice surprise.
It's relatively new (2025-01-24). @tagliala chose the perfect time to start the conversation about this migration 😄.
Thanks for taking a look into the plugin changes. Please consider that Tailwind V4 made changes to its preflight. |
That was intentional, I did wait for flowbite and css-bundling (which we are using on the CI) support for v4 before, I wouldn't have asked otherwise I'm experimenting with flowbite 3 + tailwind 4 here: https://github.com/diowa/ruby3-rails8-flowbite-render |
| @tailwind utilities; | ||
| @import "tailwindcss"; | ||
|
|
||
| @config "../../../tailwind-active_admin.config.js"; |
There was a problem hiding this comment.
The javascript config file is needed by flowbite?
There was a problem hiding this comment.
No, the config file is needed to instruct Tailwind to scan our view files (active-admin distributed views).
There is no standard replacement for https://github.com/activeadmin/activeadmin/blob/master/lib/generators/active_admin/assets/templates/tailwind.config.js#L10 yet.
tailwindcss-rails has an ongoing discussion about engine support here.
I'm playing around with an idea on how to use CSS configuration in 34227e3
|
@mgrunberg thank you for doing this upgrade. I needed it in order to use vite_rails in my project. So your upgrade will make part of ActiveAdmin vite_rails installation straightforward using default
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
import ViteRails from 'vite-plugin-rails'
export default defineConfig({
plugins: [
tailwindcss(),
ViteRails(),
],
})I can make a PR to update the docs once your PR merges. |
|
Superseded by #8709 |
This PR migrates Tailwind v3 to v4. In the process, it upgrades flowbite from 2.3.1 to 3.1.2 (latest).
I made the minimum changes to support v4. I don't pretend to support v3.
Note: I didn't check that the app looks as good as before. Based on @javierjulio comments, that shouldn't be a problem.
Breaking changes
.mjsextensions. That removes a warning if your project (package.json) is not a type module.Next steps
The goal of this PR is just to use Tailwind v4. I will try to remove js configuration file and plugin usage in another PR