How to use ActiveAdmin with TailwindCSS Rails without Tailwind styles breaking

Question

I am using tailwindcss-rails gem along with Flowbite(fyi). I developed a whole app on top of those two and recently I needed to add an admin gem to the app. I really like ActiveAdmin, but as soon as I add it and sassc-rails all of the app's style breaks and it doesn't use Tailwind classes. Because if I don't add sassc-rails ActiveAdmin won't run.

How can I make these two work together?

There is not much more I can add to the question, but if you need more info or some code snippets, please ask.

crodev · Accepted Answer · 2023-10-10 15:11:23Z

1

I managed to fix the issue by following this answer

Basically you need to move active_admin.js from app/assets/javascripts to vendor/assets/javascripts(you need to create these folders), and moving active_admin.scss from app/assets/stylesheets to vendor/assets/stylesheets.

Even though that was in the answer, it still didn't work, so if it doesn't for you, just do the following that helped me:

In vendor/assets/stylesheets/active_admin.scss:

// From this
@import "mixins";
@import "base";

// To this
@import "active_admin/mixins";
@import "active_admin/base";

And in vendor/assets/javascripts/active_admin.js:

//= require active_admin/base

Replace it with this in case you have some relative path appended that didn't work.

answered Oct 10, 2023 at 15:11

crodev

1,4916 gold badges26 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use ActiveAdmin with TailwindCSS Rails without Tailwind styles breaking

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related