I’m using tailwindcss-rails gem in Rails 7 project with asset pipeline. I need to reuse TailwindCSS styles, for example:
.pagy-nav {
@apply flex space-x-2;
}
I can put this code in app/assets/stylesheets/application.tailwind.css
file and it works:
@tailwind base;
@tailwind components;
@tailwind utilities;
.pagy-nav {
@apply flex space-x-2;
}
However, I want to put the .pagy-nav
code into a separate css file pagy.css (to be more clean/organised). Is there a way to do it?
@import
works out of the box since tailwindcss-rails v2.0.10
(tailwindcss v3.1.2
):
https://github.com/tailwindlabs/tailwindcss/pull/8580
@import "./pagy_nav.css"; // import must come first, because `postcss-import` says so.
@tailwind base;
@tailwind components;
@tailwind utilities;
Or switch everything to import:
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "./pagy_nav.css";