Bump tailwind from 3.4.18 to 4.1.17 by tagliala · Pull Request #8709 · activeadmin/activeadmin

tagliala · 2025-05-05T12:21:57Z

Upgrading: https://github.com/activeadmin/activeadmin/blob/master/UPGRADING.md#upgrading-from-earlier-4x-beta-to-400beta19

Remove tailwind v3 downgrade from test-application
Use tailwind cli to compile css
Delete generated files that are not used
Add a reference to old javascript config file
Remove @tailwind directive
Remove config argument when adding build:css script to test app
Rename deprecated utilities
https://tailwindcss.com/docs/upgrade-guide#renamed-utilities

TODO:

https://tailwindcss.com/docs/upgrade-guide#default-border-color

Warning in console

15:46:31 css.1     | (node:70995) [MODULE_TYPELESS_PACKAGE_JSON] Warning: Module type of file:///.../tailwind-active_admin.config.js?id=1746452791729 is not specified and it doesn't parse as CommonJS.
15:46:31 css.1     | Reparsing as ES module because module syntax was detected. This incurs a performance overhead.
15:46:31 css.1     | To eliminate this warning, add "type": "module" to ./package.json.
15:46:31 css.1     | (Use `node --trace-warnings ...` to show where the warning was created)

Document to add "type": "module", to app's package.json ? 3bfb95e#r1972531187

~~tailwindcss@cli should be installed as a dev dependency?~~ Not from scratch, this is being done by cssbundling rails

15:49:56 css.1     | Need to install the following packages:
15:49:56 css.1     | @tailwindcss/[email protected]

Additionally:

Set scheme-dark on input fields when dark mode is enabled
Before

After

codecov · 2025-05-05T12:25:36Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 99.08%. Comparing base (3dd74c3) to head (4543bd8).
⚠️ Report is 1 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #8709   +/-   ##
=======================================
  Coverage   99.08%   99.08%           
=======================================
  Files         139      139           
  Lines        4046     4046           
=======================================
  Hits         4009     4009           
  Misses         37       37

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

tagliala · 2025-05-05T14:22:10Z

UPGRADING.md

https://github.com/activeadmin/activeadmin/blob/tagliala/tailwind-v4/UPGRADING.md#upgrading-from-earlier-4x-beta-to-400beta16

rajputlakhveer

Just Tested! Worked for me.

bopm · 2025-06-16T23:49:10Z

@tagliala I would like to bring this to your attention, and happy to help you adopt it in this PR.

le0pard · 2025-10-22T10:26:05Z

https://github.com/flavorjones/tailwindcss-ruby/blob/fc3c88dcb127e23f8d8bf85d081495469ce4e565/rakelib/package.rake#L71 - it is just download tailwindcss binaries, which sits in npm packages and pack it's in gems. It don't have "ruby port of tailwind" or something else.

In any case you can point command "build:css" in package.json to any tailwindcss binary source - from npm or ruby, it is not a big deal

henrikbjorn · 2025-10-22T12:10:43Z

https://github.com/flavorjones/tailwindcss-ruby/blob/fc3c88dcb127e23f8d8bf85d081495469ce4e565/rakelib/package.rake#L71 - it is just download tailwindcss binaries, which sits in npm packages and pack it's in gems. It don't have "ruby port of tailwind" or something else.

In any case you can point command "build:css" in package.json to any tailwindcss binary source - from npm or ruby, it is not a big deal

Still requires you to have node installed.

The tailwindcss cli for specific platforms is pre-compiled with bun and does not need node or npm.

This is a pretty common pattern for Rubygems to do for gems that integrate with other binaries etc.

The best example for this is nokogiri where you don't need to install all the dev dependencies to compile it.

henrikbjorn · 2025-10-22T12:14:04Z

Also with that mindset, we should just add a Cargo.toml for our Tailwind projects, since tailwind dependes on @tailwindcss/oxide that is build of their Rust library

UPGRADING.md

javierjulio

@tagliala thank you for all your help here. I've pushed some additional changes for Tailwind v4 support.

I believe we only have 2 items left to address here but I didn't have time to tackle today:

Address the outline-none instances on review
Upgrade Flowbite from v2 to v3 for Tailwind v4 support

tagliala · 2025-11-11T22:10:39Z

Great, flowbite is already at v3 since it works for both Tailwind v3 and v4:

activeadmin/package.json

Line 47 in 482fef4

"flowbite": "3.1.2"

Ref: #8692

- Remove tailwind v3 downgrade from test-application - Use tailwind cli to compile css - Delete generated files that are not used - Add a reference to old javascript config file - Remove `@tailwind` directive - Remove config argument when adding `build:css` script to test app - Rename deprecated utilities https://tailwindcss.com/docs/upgrade-guide#renamed-utilities

https://tailwindcss.com/docs/upgrade-guide#default-border-color

Use v4's `scheme-dark` to fix icon colors on some native inputs Ref: https://v3.tailwindcss.com/docs/v4-beta#color-scheme-utilities

Just a few missing instances on review https://tailwindcss.com/docs/upgrade-guide#renamed-outline-utility https://tailwindcss.com/docs/upgrade-guide#updated-shadow-radius-and-blur-scales

Ran this last to account for any other changes.

javierjulio

Thanks! I'll leave this for you @tagliala to merge if you have nothing else to change.

tagliala · 2025-11-20T16:57:00Z

Hello, thank you everyone for the interest in this feature

ActiveAdmin v4.0.0-beta19 has been released with Tailwind v4

Please do not hesitate to provide feedback

le0pard · 2025-11-20T17:00:01Z

Great job, team!

tagliala added the type breaking change label May 5, 2025

tagliala mentioned this pull request May 5, 2025

Migrate to tailwind v4 #8640

Closed

tagliala commented May 5, 2025

View reviewed changes

tagliala force-pushed the tagliala/tailwind-v4 branch from 11c4e9e to 4d2b2d1 Compare May 5, 2025 19:17

tagliala requested a review from javierjulio May 5, 2025 20:19

tagliala force-pushed the tagliala/tailwind-v4 branch 4 times, most recently from 5e6685d to 99c9780 Compare May 7, 2025 07:40

tagliala removed the request for review from javierjulio May 7, 2025 07:42

tagliala force-pushed the tagliala/tailwind-v4 branch 5 times, most recently from e8154c9 to 7b44d57 Compare May 8, 2025 07:40

tagliala requested review from javierjulio and mgrunberg May 8, 2025 08:17

mgrunberg approved these changes May 8, 2025

View reviewed changes

tagliala force-pushed the tagliala/tailwind-v4 branch 2 times, most recently from 16a5e61 to 2916f72 Compare May 11, 2025 20:16

tagliala changed the title ~~Bump tailwind from 3.4.17 to 4.1.5~~ Bump tailwind from 3.4.17 to 4.1.6 May 11, 2025

tagliala force-pushed the tagliala/tailwind-v4 branch from 2916f72 to e131141 Compare May 15, 2025 15:47

tagliala changed the title ~~Bump tailwind from 3.4.17 to 4.1.6~~ Bump tailwind from 3.4.17 to 4.1.7 May 15, 2025

rajputlakhveer approved these changes May 17, 2025

View reviewed changes

tagliala force-pushed the tagliala/tailwind-v4 branch from e131141 to 5bf67d5 Compare May 31, 2025 07:34

tagliala changed the title ~~Bump tailwind from 3.4.17 to 4.1.7~~ Bump tailwind from 3.4.17 to 4.1.8 Jun 1, 2025

tagliala force-pushed the tagliala/tailwind-v4 branch from 5bf67d5 to 92fd144 Compare June 12, 2025 10:57

tagliala changed the title ~~Bump tailwind from 3.4.17 to 4.1.8~~ Bump tailwind from 3.4.17 to 4.1.10 Jun 12, 2025

tagliala force-pushed the tagliala/tailwind-v4 branch from e682732 to 7b37f90 Compare November 1, 2025 23:24

tagliala changed the title ~~Bump tailwind from 3.4.18 to 4.1.15~~ Bump tailwind from 3.4.18 to 4.1.16 Nov 1, 2025

tagliala force-pushed the tagliala/tailwind-v4 branch 2 times, most recently from c093d38 to 184dbab Compare November 2, 2025 11:09

This comment has been minimized.

Sign in to view

jeremybdk reviewed Nov 3, 2025

View reviewed changes

UPGRADING.md Show resolved Hide resolved

tagliala force-pushed the tagliala/tailwind-v4 branch 2 times, most recently from 705336d to d42f083 Compare November 10, 2025 21:27

tagliala changed the title ~~Bump tailwind from 3.4.18 to 4.1.16~~ Bump tailwind from 3.4.18 to 4.1.17 Nov 10, 2025

javierjulio force-pushed the tagliala/tailwind-v4 branch 2 times, most recently from 1a29654 to c98983e Compare November 11, 2025 21:34

javierjulio reviewed Nov 11, 2025

View reviewed changes

mgrunberg and others added 8 commits November 19, 2025 15:48

Add missing border colors for v4

6d49e6d

https://tailwindcss.com/docs/upgrade-guide#default-border-color

Set color-scheme on input fields

5d8d99b

Use v4's `scheme-dark` to fix icon colors on some native inputs Ref: https://v3.tailwindcss.com/docs/v4-beta#color-scheme-utilities

Update upgrading guide

d5e25dc

Replace deprecated utility

9dd5b97

Address renamed utilities

400ca5c

Just a few missing instances on review https://tailwindcss.com/docs/upgrade-guide#renamed-outline-utility https://tailwindcss.com/docs/upgrade-guide#updated-shadow-radius-and-blur-scales

npx @tailwindcss/upgrade

f15ee36

Ran this last to account for any other changes.

Update comments body column/truncate width

4543bd8

javierjulio force-pushed the tagliala/tailwind-v4 branch from c98983e to 4543bd8 Compare November 19, 2025 21:38

javierjulio approved these changes Nov 19, 2025

View reviewed changes

tagliala merged commit cd9343a into master Nov 20, 2025
31 checks passed

tagliala deleted the tagliala/tailwind-v4 branch November 20, 2025 10:41

Uh oh!

Conversation

tagliala commented May 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Upgrading: https://github.com/activeadmin/activeadmin/blob/master/UPGRADING.md#upgrading-from-earlier-4x-beta-to-400beta19

Additionally:

Before

After

Uh oh!

codecov bot commented May 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

tagliala May 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rajputlakhveer left a comment

Choose a reason for hiding this comment

Uh oh!

bopm commented Jun 16, 2025

Uh oh!

le0pard commented Oct 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

henrikbjorn commented Oct 22, 2025

Uh oh!

henrikbjorn commented Oct 22, 2025

Uh oh!

This comment has been minimized.

Uh oh!

javierjulio left a comment

Choose a reason for hiding this comment

Uh oh!

tagliala commented Nov 11, 2025

Uh oh!

javierjulio left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

tagliala commented Nov 20, 2025

Uh oh!

le0pard commented Nov 20, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

tagliala commented May 5, 2025 •

edited

Loading

codecov bot commented May 5, 2025 •

edited

Loading

tagliala May 5, 2025 •

edited

Loading

le0pard commented Oct 22, 2025 •

edited

Loading