8000 Update upgrading guide · activeadmin/activeadmin@e8154c9 · GitHub
[go: up one dir, main page]
Skip to content

Commit e8154c9

Browse files
taglialatagliala
committed
Update upgrading guide
1 parent 331595c commit e8154c9

File tree

1 file changed

+42
-4
lines changed

1 file changed

+42
-4
lines changed

‎UPGRADING.md

Lines changed: 42 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,18 @@ ActiveAdmin v4 uses TailwindCSS. It has **mobile web, dark mode and RTL support*
88

99
These instructions assume the `cssbundling-rails` and `importmap-rails` gems are already installed and you have run their install commands in your app. If you haven't done so, please do before continuing.
1010

11-
Update your `Gemfile` with `gem "activeadmin", "4.0.0.beta15"` and then run `gem install activeadmin --pre`.
11+
Update your `Gemfile` with `gem "activeadmin", "4.0.0.beta16"` and then run `gem install activeadmin --pre`.
1212

1313
Now, run `rails generate active_admin:assets` to replace the old assets with the new files.
1414

1515
Then add the npm package and update the `build:css` script.
1616

1717
```
18-
yarn add @activeadmin/activeadmin@4.0.0-beta15
19-
npm pkg set scripts.build:css="tailwindcss -i ./app/assets/stylesheets/active_admin.css -o ./app/assets/builds/active_admin.css --minify -c tailwind-active_admin.config.js"
18+
yarn add @activeadmin/activeadmin@4.0.0-beta16
19+
npm pkg set scripts.build:css="npx @tailwindcss/cli -i ./app/assets/stylesheets/active_admin.css -o ./app/assets/builds/active_admin.css --minify"
2020
```
2121

22-
If you are already using Tailwind in your app, then update the `build:css` script to chain the above command to your existing one, e.g. `"tailwindcss ... && tailwindcss ..."`, so both stylesheets are generated.
22+
If you are already using Tailwind in your app, then update the `build:css` script to chain the above command to your existing one, e.g. `"npx @tailwindcss/cli ... && npx @tailwindcss/cli ..."`, so both stylesheets are generated.
2323

2424
Many configs have been removed (meta tags, asset registration, utility nav, etc.) that can now be modified more naturally through partials.
2525

@@ -47,6 +47,44 @@ Note that the templates can and will change across releases. There are additiona
4747

4848
With the setup complete, please review the Breaking Changes section and resolve any that may or may not impact your integration.
4949

50+
### Upgrading from earlier 4.x beta to 4.0.0.beta16
51+
52+
Starting with version 4.0.0.beta16, ActiveAdmin has migrated from TailwindCSS v3 to TailwindCSS v4.
53+
54+
If you're upgrading from any earlier 4.0.0 beta release, please review and apply the required adjustments outlined below.
55+
56+
Update your `active_admin.css` file:
57+
58+
```diff
59+
-@tailwind base;
60+
-@tailwind components;
61+
-@tailwind utilities;
62+
+@import "tailwindcss";
63+
+
64+
+@config "../../../tailwind-active_admin.config.js";
65+
```
66+
67+
Update the `build:css` script in your `package.json`:
68+
69+
```diff
70+
-"build:css": "tailwindcss -i ./app/assets/stylesheets/active_admin.css -o ./app/assets/builds/active_admin.css --minify -c tailwind-active_admin.config.js"
71+
+"build:css": "npx @tailwindcss/cli -i ./app/assets/stylesheets/active_admin.css -o ./app/assets/builds/active_admin.css --minify"
72+
```
73+
74+
You may see the following warning when upgrading:
75+
76+
```
77+
[MODULE_TYPELESS_PACKAGE_JSON] Warning: Module type of tailwind-active_admin.config.js is not specified and it doesn't parse as CommonJS.
78+
Reparsing as ES module because module syntax was detected. This incurs a performance overhead.
79+
To eliminate this warning, add "type": "module" to ./package.json.
80+
```
81+
82+
This happens because the Tailwind config file uses ES module syntax.
83+
84+
To fix it, either:
85+
- Rename `tailwind-active_admin.config.js` to `tailwind-active_admin.config.mjs`; or
86+
- Add `"type": "module"` to your `package.json` (your application may already be compatible with ESM).
87+
5088
### Breaking Changes
5189
- jQuery and jQuery UI have been removed.
5290
- The `columns` component has been removed. Use `div`'s with Tailwind classes for modern, responsive layout.

0 commit comments

Comments
 (0)
0