CODEWITHSUNDEEP
cssruby-on-railstailwind-cssasset-pipeline
Evgenii
Evgenii

Reputation: 37339

How to include @apply CSS code for reusing TailwindCSS styles with tailwindcss-rails?

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?

Upvotes: 2

Views: 2306

Answers (1)

Alex
Alex

Reputation: 29821

@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";

Upvotes: 9

Related Questions