Hello, I think that you are very close

rails _8.0.2_ new my_app
cd my_app
bundle add activeadmin -v=4.0.0beta15
bundle add devise
rails g active_admin:install
bundle add cssbundling-rails -v "1.4.1" # Newer versions support TailwindCSS v4
bundle add tailwindcss-ruby -v "~> 3.4.17"
yarn add tailwindcss@^3.4.17 # <-- ActiveAdmin uses TailwindCSS v3
rails css:install:tailwind # <-- If tailwind v3 is not being found in package.json, it will install v4
rails db:migrate
rails db:seed
gem "tailwindcss-ruby", "3.4.13"
yarn add @activeadmin/activeadmin@4.0.0-beta15
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"

And then run

./bin/dev

instead of rails s (or manually compile assets before)

If you have problems, please post the output of yarn/npm/pnpm/whatever build:css

References:

• https://github.com/activeadmin/activeadmin/blob/master/spec/support/rails_template.rb
• https://github.com/activeadmin/activeadmin/blob/master/UPGRADING.md#from-v3-to-v4-beta

I think that installation instructions should be slightly modified, however this depends on the use case. I suspect there are several ways of installing ActiveAdmin, one does not even include node, so I don't know what the default way should be

It would be really great, if I don't have such dependencies, as node/yarn.

yarn build:css --watch
yarn run v1.22.22
$ tailwindcss -i ./app/assets/stylesheets/active_admin.css -o ./app/assets/builds/active_admin.css --minify -c tailwind-active_admin.config.js --watch

Rebuilding...
(node:61251) ExperimentalWarning: CommonJS module /Users/valeriya/Documents/workspace/my_app/tailwind-active_admin.config.js is loading ES Module /Users/valeriya/Documents/workspace/my_app/node_modules/@activeadmin/activeadmin/plugin.js using require().
Support for loading ES Module in require() is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
file:///Users/valeriya/Documents/workspace/my_app/node_modules/@activeadmin/activeadmin/plugin.js:1
const plugin = require('tailwindcss/plugin')
               ^

ReferenceError: require is not defined
    at file:///Users/valeriya/Documents/workspace/my_app/node_modules/@activeadmin/activeadmin/plugin.js:1:16
    at ModuleJobSync.runSync (node:internal/modules/esm/module_job:395:35)
    at ModuleLoader.importSyncForRequire (node:internal/modules/esm/loader:329:47)
    at loadESMFromCJS (node:internal/modules/cjs/loader:1380:24)
    at Module._compile (node:internal/modules/cjs/loader:1532:5)
    at Object..js (node:internal/modules/cjs/loader:1702:10)
    at Module.load (node:internal/modules/cjs/loader:1307:32)
    at Function._load (node:internal/modules/cjs/loader:1121:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:219:24)

Node.js v23.2.0
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I believe plugin.js must have another syntax.

For example, doing such conversion in tailwind-active_admin.config.js fixed similar error.

const execSync = require('child_process').execSync;
->
import { execSync } from 'child_process';

Ok thanks, it's Node 23.

As a workaround, please switch to 22 LTS

Ref: #8534

i am also facing the same issue as some one new to rails already i want to solve this issue but can't find any solution been messing with the internet for around 4 5 hours
Can any one give me solution
and i am not even working with npm what will be the solution

Thanks @tagliala, with the cssbundling-rails gem added I'm now receiving build pipeline errors

cssbundling-rails: Command build failed, ensure `yarn build:css` runs without errors

@justinperkins try to follow #8538 (reply in thread) for new app or #8538 (reply in thread) for existing app

awesome.
how can we improve the docs so it works out of the box for everyone?
nodejs shall not be required, i agree.

My environment.

ruby v3.3.6
rails v8.0.0
node v22.2.0
yarn v1.22.22

For an existing application, which didn't support any assets earlier, I had to do this steps:

1. Add to Gemfile

gem 'activeadmin', '4.0.0beta13'
gem 'cssbundling-rails'
gem 'devise'
gem 'importmap-rails'
gem 'propshaft'

2. Run all commands for installing activeadmin:

rails g active_admin:install User # I've already had User model with devise
rails generate active_admin:assets

3. Run commands for generating and filling package.json

yarn add @activeadmin/activeadmin@4.0.0-beta13
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"

It generates me package.json with following lines:

{
  "dependencies": {
    "@activeadmin/activeadmin": "4.0.0-beta13"
  },
  "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"
  }
}

4. Run assets compilation:

rails css:install
yarn build:css 

But here my activeadmin page still looks like there is no styles. So..

4. I made some changes including moving tailwind-active_admin.config.js to app/assets/config (it's not necessary!). And my package.json became this:

{
  "name": "my_app",
  "private": "true",
  "dependencies": {
    "@activeadmin/activeadmin": "4.0.0-beta13",
    "tailwindcss": "^3.4.15",
    "autoprefixer": "^10.4.20",
    "postcss": "^8.4.49"
  },
  "scripts": {
    "build:css": "tailwindcss -i ./app/assets/stylesheets/active_admin.css -o ./app/assets/builds/active_admin.css --minify -c ./app/assets/config/tailwind-active_admin.config.js"
  }
}

As far as I understand,

• name is not necessary
• private need for not asking license, if it is a private app
• without tailwindcss, autoprefixer, postcss packages I didn't get result 🤷 UPD: however, I dropped them later, and it also works 🤷

And I change path to tailwind-active_admin.config.js in my package.json

5. Run assets compilation again:

yarn build:css 

NOTE: don't forget to add these lines to .gitignore:

/app/assets/builds/*
!/app/assets/builds/.keep

/node_modules

IT WORKS! with a little bug

My icons for toggling dark mode and user's account were not icons, but text:

The problem was in LANG.activeadmin.yml. I need to add lines to .yml file:

LANG:
  activeadmin:
    toggle_dark_mode: Toggle dark mode
    toggle_main_navigation_menu: Toggle main navigation menu
    toggle_section: Toggle section
    toggle_user_menu: Toggle user menu

So, @tagliala, I believe, that all locales files in repository must have these four lines, at least, in English. I can make a PR with adding English translations of this four fields to each locale.
For now, only works for en.yml.

is there any way we can get this running with no-build basically, so zero dependency on yarn etc?
could we, in the github pipeline, build the actual css and have it served then from the gem as a static file? that can be one option, so people can't really customize, but it serves out of the box flawless.

I can make a PR with adding English translations of this four fields to each locale.

This should not be a problem in production. In development you can spot the problem and send a PR for your locale

is there any way we can get this running with no-build basically, so zero dependency on yarn etc?

There is another discussion for that, please ask there: #8223

For those who followed these steps without success, there is one small thing to add. @tagliala and @PoroshkinaVV, thanks so much for the research.

If you use Tailwind 4,
The import directives :
@tailwind base; @tailwind components; @tailwind utilities;
have been changed to :
@import "tailwindcss";

So make sure to change this in your active_admin.css file so it works properly

Thank you! The simplicity of adding an admin gem has gone out the window with Version 4 of AA :-/

I ran into the same solution yesterday! I was planning to share it today, but you beat me to it. Thanks for sharing @tagliala ! 😄

gem 'sassc-rails' # Required for ActiveAdmin styling

This is Active Admin 3, correct?

This discussion is related to the master branch (v4 beta)

It's Active admin V3.3.0