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 customizetailwindcss-railssince it is designed for a single entrypoint file. You could install that gem and start copying it's tasks to work with thetailwind-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 thetailwindcss-rails defaults, assuming your application styles can live in a different named entrypoint file.

From there, you'll have to copy theplugin.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 filerequire("./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

...

Would it be possible to get some kind of example app or at least more detailed solution? I'm trying to setup exactly this, but still struggling and can't quite make it work. What should we put in this config file, is there a need for another tailwind css file besides generated one and where from to call requireplugin... I'm doing something wrong, but not sure what.
Thanks!

@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 thetailwindcss-rails code and basically used the same pattern, which together withProcfile.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 movedtailwind-active_admin.config.js into theconfig/ directory. Since the other config fromtailwindcss-rails is there.
2. Changed the plugin require statement torequire(${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 ranbundle binstub tailwindcss so that I get abin/tailwindcss bin script
4. Dumped the following intolib/tasks/active_admin.rbhttps://gist.github.com/henrikbjorn/cf9ab168bb6ff9195691d7add5cb7d1b It will hook into the precompile tasks (astailwindcss-rails)
5. IntoProcfile.dev add a lineactive_admin: bin/rails active_admin:watch.
6. 🥳

Thank for the detailed explanation!

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

That's what I been up to before:

moduleAdminPageLayoutOverridedefbuild_page(*args)withinsuperdorender"active_admin/layout_additions"endenddefbuild_active_admin_headwithinsuperdorender"active_admin/header"endendendActiveAdmin::Views::Pages::Base.prependAdminPageLayoutOverride

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"}

Also it was not really clear howmain_app variable change affects the migration, basically I started using it everywhere for all routes paths, even this one:

# PATH: config/initializers/active_admin.rbActiveAdmin.setup do |config|  ...  config.logout_link_path = ->(*) { main_app.destroy_user_session_path }  ...end

It would be much easier if you just shipped bundled versions ofactive_admin.css. Having strict dependency oncssbundling-rails andtailwind 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 intoapp/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, usingtailwindcss-rails andimportmaps-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:

• installactiveadmin,tailwindcss-rails andimportmap-rails gems per their instructions

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

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

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

  constexecSync=require('child_process').execSync;constactiveAdminPath=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:

  moduleTailwindCommandsOverridedefcompile_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"unlessdebug ||rails_css_compressor?postcss_path=Rails.root.join("config/postcss.config.js")command +=["--postcss",postcss_path.to_s]ifFile.exist?(postcss_path)commandendendmoduleTailwindcssmoduleCommandsclass <<selfprependTailwindCommandsOverrideendendend

  # config/puma.rbplugin:tailwindcssifENV.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 jsdelivrrm vendor/javascript/@popperjs--core.jsmv 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.8end

After that, I have a working ActiveAdmin installation, usingtailwindcss-rails andimportmap-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 withrails new . --database=postgresql --css=tailwind. So it usespropshaft.

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 tovendor/assets/stylesheets (can't remember why).
• Inconfig/initializers/sassc_monkeypatch_for_tailwind.rb

moduleSassCompressorMonkeypatchdefcall_processor(processor,input)superrescueSassC::SyntaxError=>eraiseunlessprocessor ==Sprockets::SassCompressorputs"Warning: Could not compress#{input[:filename]} with Sprockets::SassCompressor. Returning uncompressed result."unlessRails.env.test?metadata=(input[:metadata] ||{}).dupmetadata[:data]=input[:data]metadataendendSprockets::Base.prepend(SassCompressorMonkeypatch)

With Rails 8.0.0 (with propshaft), It seems I have to use the beta and I sawactiveadmin_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 oncssbundling-rails doesn't feel great.

In case someone tries to set it up with Tailwindcss v4,tailwind-active_admin.config.js can be migrated toapp/assets/stylesheets/active_admin.css as follows (given bundle gems location atvendor/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 fromhttps://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 inapp/ because, when using tailwindcss v4 with rails, tailwindcss scans most files in the project already, including all ofapp/.