cssruby-on-railstailwind-cssasset-pipeline

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?


Solution

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