activeadmin · tagliala · Feb 26, 2025 · May 5, 2025 · May 5, 2025 · May 7, 2025
diff --git a/UPGRADING.md b/UPGRADING.md
@@ -8,18 +8,18 @@ ActiveAdmin v4 uses TailwindCSS. It has **mobile web, dark mode and RTL support*
 
 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.
 
-Update your `Gemfile` with `gem "activeadmin", "4.0.0.beta15"` and then run `gem install activeadmin --pre`.
+Update your `Gemfile` with `gem "activeadmin", "4.0.0.beta16"` and then run `gem install activeadmin --pre`.
 
 Now, run `rails generate active_admin:assets` to replace the old assets with the new files.
 
 Then add the npm package and update the `build:css` script.
 
 ```
-yarn add @activeadmin/activeadmin@4.0.0-beta15
-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"
+yarn add @activeadmin/activeadmin@4.0.0-beta16
+npm pkg set scripts.build:css="npx @tailwindcss/cli -i ./app/assets/stylesheets/active_admin.css -o ./app/assets/builds/active_admin.css --minify"
 ```
 
-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.
+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.
 
 Many configs have been removed (meta tags, asset registration, utility nav, etc.) that can now be modified more naturally through partials.
 
@@ -47,6 +47,44 @@ Note that the templates can and will change across releases. There are additiona
 
 With the setup complete, please review the Breaking Changes section and resolve any that may or may not impact your integration.
 
+### Upgrading from earlier 4.x beta to 4.0.0.beta16
+
+Starting with version 4.0.0.beta16, ActiveAdmin has migrated from TailwindCSS v3 to TailwindCSS v4.
+
+If you're upgrading from any earlier 4.0.0 beta release, please review and apply the required adjustments outlined below.
+
+Update your `active_admin.css` file:
+
+```diff
+-@tailwind base;
+-@tailwind components;
+-@tailwind utilities;
++@import "tailwindcss";
++
++@config "../../../tailwind-active_admin.config.js";
+```
+
+Update the `build:css` script in your `package.json`:
+
+```diff
+-"build:css": "tailwindcss -i ./app/assets/stylesheets/active_admin.css -o ./app/assets/builds/active_admin.css --minify -c tailwind-active_admin.config.js"
++"build:css": "npx @tailwindcss/cli -i ./app/assets/stylesheets/active_admin.css -o ./app/assets/builds/active_admin.css --minify"
+```
+
+You may see the following warning when upgrading:
+
+```
+[MODULE_TYPELESS_PACKAGE_JSON] Warning: Module type of tailwind-active_admin.config.js is not specified and it doesn't parse as CommonJS.
+Reparsing as ES module because module syntax was detected. This incurs a performance overhead.
+To eliminate this warning, add "type": "module" to ./package.json.
+```
+
+This happens because the Tailwind config file uses ES module syntax.
+
+To fix it, either:
+- Rename `tailwind-active_admin.config.js` to `tailwind-active_admin.config.mjs`; or
+- Add `"type": "module"` to your `package.json` (your application may already be compatible with ESM).
+
 ### Breaking Changes
 - jQuery and jQuery UI have been removed.
 - The `columns` component has been removed. Use `div`'s with Tailwind classes for modern, responsive layout.

diff --git a/app/views/active_admin/_page_header.html.erb b/app/views/active_admin/_page_header.html.erb
@@ -1,4 +1,4 @@
-<div data-test-page-header class="bg-gray-50 border-b p-4 mb-8 flex flex-col gap-4 md:flex-row md:items-center justify-between dark:border-gray-800/50 dark:bg-inherit">
+<div data-test-page-header class="bg-gray-50 border-b border-gray-200 p-4 mb-8 flex flex-col gap-4 md:flex-row md:items-center justify-between dark:border-gray-800/50 dark:bg-inherit">
   <div class="flex flex-col gap-3 pt-1">
     <% breadcrumb_links = build_breadcrumb_links(request.path, class: "text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 no-underline") %>
     <% if breadcrumb_links.present? %>

diff --git a/app/views/active_admin/_site_footer.html.erb b/app/views/active_admin/_site_footer.html.erb
@@ -1,4 +1,4 @@
-<div class="text-sm text-center mt-16 mx-8 pt-9 pb-12 text-gray-500 border-t dark:border-gray-800">
+<div class="text-sm text-center mt-16 mx-8 pt-9 pb-12 text-gray-500 border-t border-gray-200 dark:border-gray-800">
   <%= I18n.t(
         "active_admin.powered_by",
         active_admin: link_to("Active Admin", "https://activeadmin.info", class: "text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-gray-400 no-underline"),

diff --git a/app/views/active_admin/shared/_resource_comments.html.erb b/app/views/active_admin/shared/_resource_comments.html.erb
@@ -1,5 +1,5 @@
 <div class="max-w-[700px]">
-  <div class="font-bold py-3 border-b dark:border-gray-600">
+  <div class="font-bold py-3 border-b border-gray-200 dark:border-gray-600">
     <%= ActiveAdmin::Comment.model_name.human(count: 2.1) %>
   </div>
   <% if authorized?(ActiveAdmin::Auth::NEW, ActiveAdmin::Comment) %>
@@ -15,12 +15,12 @@
     end
     %>
   <% end %>
-  <div class="font-bold py-3 border-b dark:border-gray-600">
+  <div class="font-bold py-3 border-b border-gray-200 dark:border-gray-600">
     <%= I18n.t "active_admin.comments.title_content", count: comments.total_count %>
   </div>
   <% if comments.any? %>
     <% comments.each do |comment| %>
-      <div class="border-b dark:border-gray-600 py-6 max-w-[700px]" id="<%= dom_id(comment, :active_admin) %>" data-test-comment-container>
+      <div class="border-b border-gray-200 dark:border-gray-600 py-6 max-w-[700px]" id="<%= dom_id(comment, :active_admin) %>" data-test-comment-container>
         <div class="flex gap-4 items-end mb-2">
           <span class="font-semibold">
             <%= comment.author ? auto_link(comment.author) : I18n.t("active_admin.comments.author_missing") %>

diff --git a/lib/generators/active_admin/assets/templates/active_admin.css b/lib/generators/active_admin/assets/templates/active_admin.css
@@ -1,3 +1,3 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+@config "../../../tailwind-active_admin.config.js";
diff --git a/package.json b/package.json
@@ -29,7 +29,7 @@
     "eslint": "^9.30.1",
     "gherkin-lint": "^4.2.2",
     "rollup": "^4.44.2",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.1.11",
     "vitepress": "^1.6.3"
   },
   "scripts": {

diff --git a/plugin.js b/plugin.js
@@ -47,6 +47,7 @@ export default plugin(
         'textarea',
         'select',
       ]]: {
+        '@apply dark:scheme-dark': {},
         appearance: 'none',
         'background-color': '#fff',
         'border-color': theme('colors.gray.500', colors.gray[500]),
@@ -307,7 +308,7 @@ export default plugin(
         visibility: 'hidden',
       },
       '[type=checkbox]': {
-        '@apply w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600': {}
+        '@apply w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600': {}
       },
       '[type=radio]': {
         '@apply w-4 h-4 border-gray-300 focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 dark:focus:bg-blue-600 dark:bg-gray-700 dark:border-gray-600': {}
@@ -321,7 +322,7 @@ export default plugin(
     });
     addComponents({
       '.action-item-button': {
-        '@apply py-2 px-3 text-sm font-medium no-underline text-gray-900 focus:outline-none bg-white rounded-md border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700': {}
+        '@apply py-2 px-3 text-sm font-medium no-underline text-gray-900 focus:outline-hidden bg-white rounded-md border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white da
F438
rk:hover:bg-gray-700': {}
       },
       '.index-data-table-toolbar': {
         '@apply flex flex-col lg:flex-row gap-4 mb-4': {}
@@ -346,7 +347,7 @@ export default plugin(
         '@apply inline-flex items-center justify-center rounded-full bg-indigo-200/80 text-indigo-800 dark:bg-indigo-800 dark:text-indigo-200 px-1.5 py-1 text-xs font-normal ms-2 leading-none': {}
       },
       '.paginated-collection': {
-        '@apply border border-gray-200 dark:border-gray-800 rounded-md shadow-sm overflow-hidden': {}
+        '@apply border border-gray-200 dark:border-gray-800 rounded-md shadow-xs overflow-hidden': {}
       },
       '.paginated-collection-contents': {
         '@apply overflow-x-auto': {}
@@ -367,7 +368,7 @@ export default plugin(
         '@apply w-full text-sm text-gray-800 dark:text-gray-300': {}
       },
       '.data-table :where(thead > tr > th)': {
-        '@apply px-3 py-3.5 whitespace-nowrap font-semibold text-start text-xs uppercase border-b text-gray-700 bg-gray-50 dark:bg-gray-950/50 dark:border-gray-800 dark:text-white': {}
+        '@apply px-3 py-3.5 whitespace-nowrap font-semibold text-start text-xs uppercase border-b border-gray-200 text-gray-700 bg-gray-50 dark:bg-gray-950/50 dark:border-gray-800 dark:text-white': {}
       },
       '.data-table :where(thead > tr > th > a)': {
         '@apply text-inherit no-underline inline-flex items-center gap-2': {}
@@ -382,7 +383,7 @@ export default plugin(
         '@apply rotate-180': {}
       },
       '.data-table :where(tbody > tr)': {
-        '@apply border-b dark:border-gray-800': {}
+        '@apply border-b border-gray-200 dark:border-gray-800': {}
       },
       '.data-table :where(td)': {
         '@apply px-3 py-4': {}
@@ -412,7 +413,7 @@ export default plugin(
         '@apply flex gap-2 items-center': {}
       },
       '.filters-form-submit': {
-        '@apply min-w-[6rem] font-bold text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-md px-3 py-2 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 cursor-pointer': {}
+        '@apply min-w-[6rem] font-bold text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-hidden focus:ring-blue-300 rounded-md px-3 py-2 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 cursor-pointer': {}
       },
       '.filters-form-clear': {
         '@apply rounded-md px-3 py-2 font-semibold text-gray-700 hover:bg-gray-100 no-underline dark:text-gray-400 dark:hover:bg-inherit dark:hover:text-gray-100 dark:focus:ring-blue-800': {}
@@ -433,13 +434,13 @@ export default plugin(
         '@apply w-2.5 h-2.5': {}
       },
       '.batch-actions-dropdown-menu': {
-        '@apply z-10 hidden min-w-[7rem] bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-700 py-1 text-sm text-gray-700 dark:text-gray-200': {}
+        '@apply z-10 hidden min-w-[7rem] bg-white rounded-md shadow-lg ring-1 ring-black/5 focus:outline-hidden dark:bg-gray-700 py-1 text-sm text-gray-700 dark:text-gray-200': {}
       },
       '.batch-actions-dropdown-menu :where(li > a)': {
         '@apply block px-2.5 py-2 no-underline text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-white dark:hover:bg-gray-600 dark:hover:text-white': {}
       },
       '.panel': {
-        '@apply mb-6 border border-gray-200 rounded-md shadow-sm dark:border-gray-800': {}
+        '@apply mb-6 border border-gray-200 rounded-md shadow-xs dark:border-gray-800': {}
       },
       '.panel-title': {
         '@apply font-bold bg-gray-100 dark:bg-gray-900 rounded-t-md p-3': {}
@@ -448,13 +449,13 @@ export default plugin(
         '@apply py-5 px-3': {}
       },
       '.attributes-table': {
-        '@apply overflow-hidden mb-6 border border-gray-200 rounded-md shadow-sm dark:border-gray-800': {}
+        '@apply overflow-hidden mb-6 border border-gray-200 rounded-md shadow-xs dark:border-gray-800': {}
       },
       '.attributes-table > :where(table)': {
         '@apply w-full text-sm text-gray-800 dark:text-gray-300': {}
       },
       '.attributes-table :where(tbody > tr)': {
-        '@apply border-b dark:border-gray-800': {}
+        '@apply border-b border-gray-200 dark:border-gray-800': {}
       },
       '.attributes-table :where(tbody > tr > th)': {
         '@apply w-32 sm:w-40 text-start text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-800/60 dark:text-gray-300': {}
@@ -530,7 +531,7 @@ export default plugin(
         '@apply flex items-center gap-6': {}
       },
       '.formtastic :where([type=submit], [type=button], button)': {
-        '@apply font-bold text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg px-4 py-2 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 cursor-pointer': {}
+        '@apply font-bold text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-hidden focus:ring-blue-300 rounded-lg px-4 py-2 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 cursor-pointer': {}
       },
       '.formtastic :where(.actions .cancel-link)': {
         '@apply font-semibold leading-6 text-gray-900 dark:text-white no-underline': {}

diff --git a/spec/support/rails_template.rb b/spec/support/rails_template.rb
@@ -6,6 +6,9 @@
 create_file "app/assets/config/manifest.js"
 
 rails_command "css:install:tailwind"
+# Remove default configuration generated: https://github.com/rails/cssbundling-rails/blob/v1.4.2/lib/install/tailwind/install.rb#L7
+remove_file "app/assets/stylesheets/application.tailwind.css"
+
 rails_command "importmap:install"
 
 initial_timestamp = Time.now.strftime("%Y%m%d%H%M%S").to_i

diff --git a/tasks/test_application.rb b/tasks/test_application.rb
@@ -21,18 +21,8 @@ def soft_generate
         Kernel.system("rake dependencies:vendor") # ensure flowbite is updated for test app
         Dir.chdir(app_dir) do
           Kernel.system("yarn add @activeadmin/activeadmin")
-          Kernel.system('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"')
+          Kernel.system('npm pkg set scripts.build:css="npx @tailwindcss/cli -i ./app/assets/stylesheets/active_admin.css -o ./app/assets/builds/active_admin.css --minify"')
           Kernel.system("yarn install")
-
-          # Temporary workaround: Downgrade Tailwind CSS to v3.
-          # The `css:install:tailwind` task installs Tailwind CSS v4 by default,
-          # which is suitable for new applications.
-          # Related issues:
-          #  - activeadmin/activeadmin#8611
-          #  - rails/cssbundling-rails#163
-          # TODO: Remove this workaround once Tailwind CSS v4 is supported.
-          Kernel.system('yarn upgrade "tailwindcss@^3.4.17"')
-
           Kernel.system("yarn build:css")
         end
       end