activeadmin · mgrunberg · Feb 26, 2025 · Feb 26, 2025 · Feb 26, 2025 · Feb 26, 2025
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,21 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+/**
+ * Use #ACTIVE_ADMIN_GEM# special wildcard to reference ActiveAdmin gem path.
+ * You can run compilation in the terminal with the following command:
+ * "echo ./app/assets/stylesheets/active_admin.css | npx @tailwindcss/cli -i - -o ./app/assets/builds/active_admin.css --minify"
+ */
+
+/** Scan files distributed with activeadmin gem */
+@source "#ACTIVE_ADMIN_GEM#/vendor/javascript/flowbite.js";
+    @source "#ACTIVE_ADMIN_GEM#/plugin.js";
+@source "#ACTIVE_ADMIN_GEM#/app/views";
+
+/** Register active admin plugin */
+@plugin "#ACTIVE_ADMIN_GEM#/plugin.js";
+
+/** Ability to toggle dark mode manually (https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually) */
+@custom-variant dark (&:where(.dark, .dark *));
+
+
+/* @config "../../../tailwind-active_admin.config.js"; */
diff --git a/package.json b/package.json
@@ -29,7 +29,7 @@
     "eslint": "^9.21.0",
     "gherkin-lint": "^4.2.2",
     "rollup": "^4.34.9",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.0.9",
     "vitepress": "^1.6.3"
   },
   "scripts": {
@@ -44,6 +44,6 @@
   },
   "dependencies": {
     "@rails/ujs": "7.1.501",
-    "flowbite": "2.3.0"
+    "flowbite": "3.1.2"
   }
 }
diff --git a/plugin.js b/plugin.js
@@ -307,7 +307,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 +321,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 dark:hover:bg-gray-700': {}
       },
       '.index-data-table-toolbar': {
         '@apply flex flex-col lg:flex-row gap-4 mb-4': {}
@@ -346,7 +346,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': {}
@@ -412,7 +412,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 +433,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,7 +448,7 @@ 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': {}
@@ -530,7 +530,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,10 @@
 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"
+remove_file "tailwind.config.js"
+
 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=\'sed "s|#ACTIVE_ADMIN_GEM#|../../../|g" ./app/assets/stylesheets/active_admin.css | npx @tailwindcss/cli -i - -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

diff --git a/vendor/javascript/flowbite.js b/vendor/javascript/flowbite.js