TIL: How to use ActiveAdmin v4 without installing nodejs

ActiveAdmin is currently working on their next major version which I happily stumbled upon. Since I have been doing some small hacks to get ActiveAdmin 3 to work with Importmaps and ActiveAdmin 4 uses Importmaps and Tailwindcss by default.

Most of the following is taken from the tailwindcss-rails gem.

First move the tailwind-active_admin.config.js file into the config directory so it is next to the normal tailwind.config.js file.

In tailwind-active_admin.config.js change the path for the plugin to require(`${activeAdminPath}/plugin.js`). So it will load the plugin from the gem instead of looking for a NPM package.

Put the following into lib/tasks/active_admin.rake. It will setup a couple of convenience rake tasks and run bundle binstub tailwindcss-rails.

namespace :active_admin do
  desc "Build Active Admin Tailwind stylesheets"
  task build: :environment do
    command = [
      Rails.root.join("bin/tailwindcss").to_s,
      "-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 = [
      Rails.root.join("bin/tailwindcss").to_s,
      "--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")

Add the following line into Procfile.dev which will watch the active_admin.cssfile for changes.

active_admin: bin/rails active_admin:watch

Thats it. Party time!