Hi @amkisko. First and foremost, thank you for creating a discussion. This may be doable from some past experimenting so I will share my thoughts on how I think it could work but it's not something that the library will support. I know some others are interested in this as well.

You would have to use and customize tailwindcss-rails since it is designed for a single entrypoint file. You could install that gem and start copying it's tasks to work with the tailwind-active_admin.config.js file or if you aren't using Tailwind in your app, and only plan to do so with ActiveAdmin, then just update the files to work directly with the tailwindcss-rails defaults, assuming your application styles can live in a different named entrypoint file.

From there, you'll have to copy the plugin.js file to the root of your project and keep it up to date. Since you don't want to run Node, you will need that file locally because we provide some CSS through a Tailwind plugin and for the standalone CLI to run that plugin, it has to be relative/local. I've tried executing it from the gem path since it's included in the gem but it fails with an error. Then update your config to require the relative file require("./plugin") and it may work.

Resources:

• Deploying multiple stylesheets rails/tailwindcss-rails#151
• Standalone CLI: multiple inputs and outputs tailwindlabs/tailwindcss#7698
• What's the 2.0 strategy for including styles seen in engines? rails/tailwindcss-rails#108

@amkisko @djolereject @javierjulio

This is what I did as part of my upgrade from ActiveAdmin 3.x to the latest 4.0 (beta.4).

I took inspiration in the tailwindcss-rails code and basically used the same pattern, which together with Procfile.dev makes my rails setup completely node less.

I think this also could be a good default for ActiveAdmin, since I think many are wanting to not have node installed when developing with Rails (dartsass-rails, tailwindcss-rails, mrml-rails are examples of this)

How to do it

1. I moved tailwind-active_admin.config.js into the config/ directory. Since the other config from tailwindcss-rails is there.
2. Changed the plugin require statement to require(${activeAdminPath}/plugin.js) since the code is in the gem anyways, and the path is already resolved. This way I don't need to maintain anything separately.
3. Then I ran bundle binstub tailwindcss so that I get a bin/tailwindcss bin script
4. Dumped the following into lib/tasks/active_admin.rb https://gist.github.com/henrikbjorn/cf9ab168bb6ff9195691d7add5cb7d1b It will hook into the precompile tasks (as tailwindcss-rails)
5. Into Procfile.dev add a line active_admin: bin/rails active_admin:watch.
6. 🥳

What is the suggestion on extending header and layout of ActiveAdmin v4?

That's what I been up to before:

module AdminPageLayoutOverride
  def build_page(*args)
    within super do
      render "active_admin/layout_additions"
    end
  end

  def build_active_admin_head
    within super do
      render "active_admin/header"
    end
  end
end

ActiveAdmin::Views::Pages::Base.prepend AdminPageLayoutOverride

This thread might become a more general "migration to v4" topic.

I've got another one, that can't figure out how to fix, getting this for all resources except custom pages:

No route matches {:action=>"index", :controller=>"active_admin/users", :format=>:csv}

No route matches {:action=>"index", :controller=>"active_admin/user_metrics"}

It would be much easier if you just shipped bundled versions of active_admin.css. Having strict dependency on cssbundling-rails and tailwind to build CSS for third party library in the host app sounds weird. It will make adoption of new version harder. Personally, I very rarely have the need to customize ActiveAdmin CSS and I would rather add regular CSS classes when necessary.

Here's an example of how Avo solves it:
https://avohq.io/blog/how-to-bundle-assets-in-a-rails-engine

But it can be even simpler. Just a pre-commit hook that will run tailwind building and save the output into app/assets/stylesheets/active_admin.css.

@javierjulio what is the current support level for Turbo in ActiveAdmin? At least I have not seen any traces of usage here. One thing that does not properly work is form errors, there is a reply from server but HTML code from response is not applied to the current page, I've been experiencing such starting from v3. Have you seen such behaviour?

I've made a gem to allow running ActiveAdmin v4 without any asset setup: activeadmin_assets. Please note that it limits customizability as described in the README.

I wanted to get ActiveAdmin v4 (beta13) working with Rails v8.0.0, using tailwindcss-rails and importmaps-rails - so I didn't have to run a separate node / npm process.

In my case I wasn't using tailwind for anything else, and rails is mostly being used just as an API.

This is what I had to do:

• install activeadmin, tailwindcss-rails and importmap-rails gems per their instructions

• Move the activeadmin tailwind config to same location tailwindcss-rails puts theirs:

    mv tailwind-active_admin.config.js config/tailwind-active_admin.config.js
  

• Make small alteration to tailwind-active_admin.config.js to get the plugin path correct

  const execSync = require('child_process').execSync;
  const activeAdminPath = execSync('bundle show activeadmin', { encoding: 'utf-8' }).trim();
  
  module.exports = {
    content: [
      `${activeAdminPath}/vendor/javascript/flowbite.js`,
      `${activeAdminPath}/plugin.js`,
      `${activeAdminPath}/app/views/**/*.{arb,erb,html,rb}`,
      './app/admin/**/*.{arb,erb,html,rb}',
      './app/views/active_admin/**/*.{arb,erb,html,rb}',
      './app/views/admin/**/*.{arb,erb,html,rb}',
      './app/views/layouts/active_admin*.{erb,html}',
      './app/javascript/**/*.js'
    ],
    darkMode: "selector",
    plugins: [
      // Need to correct path to plugin.js
      // require(`@activeadmin/activeadmin/plugin`)
      require(`${activeAdminPath}/plugin`)
    ]
  }

• tailwindcss-rails has a few different ways to compile the tailwind css. I wanted to use the puma plugin, so need to override the command the puma-plugin uses so it would compile the ActiveAdmin tailwind files, rather than the tailwindcss-rails default.

  Presumably if you wanted both the default tailwindcss and activeadmin's tailwindcss, you'd do this a bit different - maybe the foreman Procfile.dev method would work better. But this worked for the puma plugin:

  Create this initializer:

  module TailwindCommandsOverride
    def compile_command(debug: false, **kwargs)
      command = [
        Tailwindcss::Ruby.executable(**kwargs),
        "-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
      ]
  
      command << "--minify" unless debug || rails_css_compressor?
  
      postcss_path = Rails.root.join("config/postcss.config.js")
      command += [ "--postcss", postcss_path.to_s ] if File.exist?(postcss_path)
  
      command
    end
  end
  
  module Tailwindcss
    module Commands
      class << self
        prepend TailwindCommandsOverride
      end
    end
  end

  # config/puma.rb
  plugin :tailwindcss if ENV.fetch("RAILS_ENV", "development") == "development"

• The ActiveAdmin import maps was a bit convoluted. First pin the package:

  bin/importmap pin @activeadmin/activeadmin
  

• But the version of poppover downloaded doesn't include all the ESM modules, so need to download a different version that does. Also note the + character in the filename mucks the importmap up, so that needs to be renamed too:

  bin/importmap pin @popperjs/core@2.11.8/+esm  --from jsdelivr
  rm vendor/javascript/@popperjs--core.js
  mv vendor/javascript/@popperjs--core--+esm.js vendor/javascript/@popperjs--core.js
  

• For some reason poppover doesn't load with the rest of the other importmaps when starting ActiveAdmin, so need to also tell activeadmin to explicitly load it, put this in an initializer

  ActiveAdmin.importmap.draw do
    pin "@popperjs/core", to: "@popperjs--core.js" # @2.11.8
  end
  

After that, I have a working ActiveAdmin installation, using tailwindcss-rails and importmap-rails. Hopefully the process could be simplfied in the future!

I have read through several conversations here about that subject, but I could figure it out.

My app was created with rails new . --database=postgresql --css=tailwind. So it uses propshaft.

Before Rails 8 (with sprocket), I could do the following to have ActiveAdmin work with Tailwind + SCSS

• In Gemfile

...
gem "activeadmin", "~> 3.2"
gem "sass-rails", "~> 6.0"

• active_admin.scss was moved to vendor/assets/stylesheets (can't remember why).
• In config/initializers/sassc_monkeypatch_for_tailwind.rb

module SassCompressorMonkeypatch
  def call_processor(processor, input)
    super
  rescue SassC::SyntaxError => e
    raise unless processor == Sprockets::SassCompressor
    puts "Warning: Could not compress #{input[:filename]} with Sprockets::SassCompressor. Returning uncompressed result." unless Rails.env.test?
    metadata = (input[:metadata] || {}).dup
    metadata[:data] = input[:data]
    metadata
  end
end
Sprockets::Base.prepend(SassCompressorMonkeypatch)

With Rails 8.0.0 (with propshaft), It seems I have to use the beta and I saw activeadmin_assets.

• In Gemfile

gem 'activeadmin', '~> 4.0.0.beta7'
gem 'activeadmin_assets'

I might have done it wrong, but that didn't work out. So for now, I have no Idea how to use ActiveAdmin with Rails 8.0.0 (+ propshaft). :(

Is there a resource written somewhere that could guide me through the steps?

Rails developer for 10+ years here. I just want to express that it's 2025 and I'm struggling to set this up.

Rails is going in the direction of simplifying things, but active admin v4 seems to be going in the opposite direction. Adding a dependency on cssbundling-rails doesn't feel great.

In case someone tries to set it up with Tailwindcss v4, tailwind-active_admin.config.js can be migrated to app/assets/stylesheets/active_admin.css as follows (given bundle gems location at vendor/bundle/ruby/xx/gems):

@import 'tailwindcss' source(none);
@source '../../../vendor/bundle/ruby/3.4.0/gems/activeadmin-4.0.0.beta15/vendor/javascript/flowbite.js';
@source '../../../vendor/bundle/ruby/3.4.0/gems/activeadmin-4.0.0.beta15/app/views';
@plugin '../../../vendor/bundle/ruby/3.4.0/gems/activeadmin-4.0.0.beta15/plugin.js';
@source '../../../vendor/bundle/ruby/3.4.0/gems/activeadmin-4.0.0.beta15/plugin.js';
/* add other @source tags from tailwind-active_admin.config.js if necessary */

As you see, I used ruby 3.4.0 and activeadmin-4.0.0.beta15. After this, the js config file can be deleted.
active_admin.rake from https://medium.com/@henrikbjorn/til-how-to-use-activeadmin-v4-without-installing-nodejs-ccdaf3ace005 can also be slightly updated by removing -c arg for both tasks.

It is not useful to add @source to folders in app/ because, when using tailwindcss v4 with rails, tailwindcss scans most files in the project already, including all of app/.