Feature: Tailwind 4 compatibility #8621
Replies: 14 comments 11 replies
-
|
Hello, this is a feature request to migrate to Tailwind 4 |
Beta Was this translation helpful? Give feedback.
-
@import "tailwindcss" source(none);
@plugin "@activeadmin/activeadmin/plugin";
@source "/bundle/ruby/3.4.0/gems/activeadmin-4.0.0.beta15/app/views/**/*.{arb,erb,html,rb}";
@source "/bundle/ruby/3.4.0/gems/activeadmin-4.0.0.beta15/plugin.js";
@source "/app/node_modules/flowbite/plugin.js";
@source "../../admin/**/*.rb";
@source "../../views/active_admin/**/*.{arb,erb,html,rb}";
@source "../../views/admin/**/*.{arb,erb,html,rb}";
@custom-variant dark (&:where(.dark, .dark *));
@utility ring-opacity-5 {
--tw-ring-opacity: 0.05;
}
@layer base {
*,
::after,
::before,
::backdrop,
::file-selector-button {
border-color: var(--color-gray-200, currentColor);
}
}This works for Tailwind 4 |
Beta Was this translation helpful? Give feedback.
-
|
Hello, you may be interested in this branch: #8649 This is a work in progress. If you find issues or have feedback, feel free to comment on that PR |
Beta Was this translation helpful? Give feedback.
-
|
@henrikbjorn The problem is not what I have to do but where. We used to do that in a JS file, having access to plenty of stuff. Now we need a quite tricky solution to put something somewhere where it doesn't actually belong. I would say that having some kind of interpolation in this place is inevitable. @tagliala I think there will be a problem with changes watching. |
Beta Was this translation helpful? Give feedback.
-
|
So, I eventually had to create this shell script to watch and render my And then use it like this: "scripts": {
"build": "npm-run-all --parallel \"build:js:* {@}\" --",
"build:js:application": "esbuild app/javascript/*.* --bundle --sourcemap --format=esm --outdir=app/assets/builds --public-path=/assets --minify",
"build:css": "npm-run-all --parallel \"build:css:* {@}\" --",
"build:css:application": "bin/watch -i ./app/assets/stylesheets/application.tailwind.css.erb -o ./app/assets/builds/application.css --tailwind --minify",
"build:css:active_admin": "bin/watch -i ./app/assets/stylesheets/active_admin.css.erb -o ./app/assets/builds/active_admin.css --tailwind --minify"
},Then, in the @source "<%= `bundle show activeadmin`.chomp %>/plugin.js";
@source "<%= `bundle show activeadmin`.chomp %>/app/views/**/*.{arb,erb,html,rb}"; |
Beta Was this translation helpful? Give feedback.
-
|
@heaven Thanks for sharing the script. I'll consider this as part of #8649. You were right about the watching issue. |
Beta Was this translation helpful? Give feedback.
-
|
@mgrunberg, You are welcome. I have just updated it slightly. There was a problem where I fed Tailwind's CLI with the rendered template via pipe erb "$INPUT_FILE" | npx @tailwindcss/cli -i - -o "$OUTPUT_FILE" $TAILWIND_FLAGSI suppose Tailwind (I didn't look at the code, so that's my guess) changes the directory to the source file location and works from there. But when feeding it via the pipe, it doesn't know about the source file location and works from the current directory. If the template has file paths like these: @source "../../admin/**/*.rb";
@source "../../views/active_admin/**/*.{arb,erb,html,rb}";
@source "../../views/admin/**/*.{arb,erb,html,rb}";
@source "../../javascript/**/*.js";They won't resolve properly, leading to incorrect results. So, I had to modify the code to find and enter the source file directory before calling Tailwind. My test showed the rendered file is identical to the one I can generate by calling Tailwind directly. UPD. Had to split the solution into two. One watches the iput file for changes and restarts Tailwind CLI if needed, and another renders the input file erb and feeds that to Tailwind CLI. |
Beta Was this translation helpful? Give feedback.
-
|
@tagliala there is no mention of the Tailwind version supported for the v4 branches of ActiveAdmin. So I would assume that the latest major version would be supported. So I consider this a bug, and if it is by design then the bug is that the documentation does not mention this. |
Beta Was this translation helpful? Give feedback.
-
|
Tailwind 4 has just been released, and ActiveAdmin is still in beta. When this was written, Tailwind 4 was not available, so the documentation reflected the latest version at that time |
Beta Was this translation helpful? Give feedback.
-
|
Blocked upstream by: rails/cssbundling-rails#164 |
Beta Was this translation helpful? Give feedback.
-
|
ActiveAdmin is using cssbundling instead of |
Beta Was this translation helpful? Give feedback.
-
|
Yes, it is used in the CI for integration specs and it is not mandatory but it is the suggested approach AFAIK It is not mentioned in the documentation, but here it is a PR here: https://github.com/activeadmin/activeadmin/pull/8545/files |
Beta Was this translation helpful? Give feedback.
-
|
@tagliala suggested by whom? Rails or the ActiveAdmin team? |
Beta Was this translation helpful? Give feedback.
-
ActiveAdmin, but it is not an official and documented suggestion. If you take a look at the CI, it is how integrations test are set up: #8545 is still a draft. If it is going to be approved, than it would be an official suggestion However, ideally that should not be mandatory. ActiveAdmin 4 could also work without Node, see #8223 |
Beta Was this translation helpful? Give feedback.
-
|
I currently have ActiveAdmin It would be great if ActiveAdmin supported Tailwind CSS v4 in a way that works seamlessly with Happy to test or contribute if needed, as I’m certainly looking forward to upgrading to Tailwind CSS v4! |
Beta Was this translation helpful? Give feedback.
-
The plugin needs to use Then the vendored Then you can just install Guessing you have the rake tasks etc. that is already based on my comment in the discussion about running ActiveAdmin without node. |
Beta Was this translation helpful? Give feedback.
-
|
@henrikbjorn thanks for your detailed answer, but doesn't this Those sources lines would also most likely not work without dynamic path logic (maybe with a
Which rake tasks are you referring to? I'm just using the default |
Beta Was this translation helpful? Give feedback.
-
Just point it to the one in the gem, based on the paths above for Also the flowbite source is because there is a new major version, and the one embedded here is old.
Sure if you just dump it into your main application .css file, then it works great. But if you want to segment them out, then you have to add a duplication of the ref: #8223 But sure, depends on what you want to achieve. |
Beta Was this translation helpful? Give feedback.
-
|
Ref: #8623 |
Beta Was this translation helpful? Give feedback.
-
|
Got to rewrite ActiveAdmin tailwindcss plugin completely to have full compatibility with tailwindcss v4: https://gist.github.com/amkisko/af1b2f7dc4f0f941437ea16400277864 -- seems to work, might be that some styles are missing or broken. But this seems to be what should be done to current codebase. Since tailwindcss v4 is backward compatible with v3, we can still use javascript config for dynamic paths. 🎉 |
Beta Was this translation helpful? Give feedback.
-
|
I think this also shows good example how to fully replace ActiveAdmin styling. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Pre-requirements:
Expected behavior
Tailwind 4 goes a long way of having BC with earlier versions. But the
plugin.jsis using some invalid utility types and there for isn't compatible with it.Actual behavior
Should work with Tailwind 4 through the
@plugindirectlive or their js config bc layerHow to reproduce
Install ActiveAdmin and use Tailwind 4
Beta Was this translation helpful? Give feedback.
All reactions