With more than 30M downloads, Active Admin is historically Rails most popular admin interface gem. It was already highly recommended when I started learning Rails years ago and appart from a few paid admin templating tools like Jumpstart or Avo, the open source alternatives weren't as feature-rich. Active Admin was great because it was easy to integrate and it incorporated a nice combo of staple Rails tools out of the box: Devise, Ransack, Kaminari and CanCanCan.

But it had one main problem: for a very long time, graphically it looked like it was made in the early 2000s and for me, theming a backoffice tool is just a colossal waste of time so I stayed away from it.

But that is no longer the case since the release of v4.0.0.beta1 which announces a great future for ActiveAdmin's next major version.

Am I overreacting over an admin panel? Yes but it's the little things in life that make it worth it

The show view. Leagues ahead of what it was before.

The contributors team writes :

Our first beta release of ActiveAdmin v4, six months in the making! It's using TailwindCSS and has mobile web, dark mode and RTL support with a default, customizable theme through partials.

But the list doesn't stop there! ActiveAdmin V4 will also give you :

• Flowbite out of the box!
• Impormaps compatibility (bye bye Node!)
• JS/CSS bundling!
• No more Jquery dependencies

As soon as I heard about this, I new I had to try this release. I was very fortunate to do it on a project I delivered for Alliance Solidaire des Français de l'Etranger, and the client and I were extremely satisfied with the results. Following the integration guide was pretty straightforward until I had to make the gem work with importmaps and avoid NPM/node - that took some work. In a nutshell, I found out you need to change the default compilation process for ActiveAdmin's CSS.

How to use ActiveAdmin v4 without Node

• Let's start by changing the tailwind-active_admin.config.js file so it loads the plugin from the gem instead of looking for a NPM package:

  - plugins: [require(`@activeadmin/activeadmin/plugin`)],
  + plugins: [require(`${activeAdminPath}/plugin.js`)],

• I found on this blog post the idea to move the tailwind-active_admin.config.js file into the config directory so it is next to the normal tailwind.config.js file.

• Then, you need to create a new rake task lib/tasks/active_admin.rake that will take care of building ActiveAdmin's Tailwind stylesheets and monitoring changes when you add new classes so it can rebuild :

  namespace :active_admin do
    desc "Build Active Admin Tailwind stylesheets"
    task build: :environment do
      command = [
        "tailwindcss",
        "-i", Rails.root.join("app/assets/stylesheets/active_admin.css").to_s,
        "-o", Rails.root.join("app/assets/builds/active_admin.css").to_s,
        "-c", Rails.root.join("config/tailwind-active_admin.config.js").to_s,
      ]

      system(*command, exception: true)
    end

    desc "Watch Active Admin Tailwind stylesheets"
    task watch: :environment do
      command = [
        "tailwindcss",
        "--watch",
        "-i", Rails.root.join("app/assets/stylesheets/active_admin.css").to_s,
        "-o", Rails.root.join("app/assets/builds/active_admin.css").to_s,
        "-c", Rails.root.join("config/tailwind-active_admin.config.js").to_s,
      ]

      system(*command)
    end
  end

  Rake::Task["assets:precompile"].enhance(["active_admin:build"])

  Rake::Task["test:prepare"].enhance(["active_admin:build"]) if Rake::Task.task_defined?("test:prepare")
  Rake::Task["spec:prepare"].enhance(["tailwindcss:build"]) if Rake::Task.task_defined?("spec:prepare")
  Rake::Task["db:test:prepare"].enhance(["tailwindcss:build"]) if Rake::Task.task_defined?("db:test:prepare")

• Last but not least, we need to execute this new task (build:css) when launching a server : add this in Procfile.dev

  active_admin: bin/rails active_admin:watch

• Make sure you have the following in active_admin.css so ActiveAdmin can use TailwindCSS classes

  @tailwind base;
  @tailwind components;
  @tailwind utilities;

Caveats

• Using custom partials works flawlessly, but I admit it's best to use them only to simple create static pages or small sections. Arbre components will always integrate better.
• The status_tag component isn't as easy to apply to non booleans as it should. It's best to custom style your pills.
• The Arbre integration is still great, but can show limitations for implementing filters with custom Ransack queries.