如何包含 @apply CSS 代码以通过 tailwindcss-rails 重用 TailwindCSS 样式？

Question

我在带有资产管道的 Rails 7 项目中使用 tailwindcss-rails gem。我需要重用TailwindCSS样式，例如：

.pagy-nav {
  @apply flex space-x-2;
}

我可以将此代码放入

app/assets/stylesheets/application.tailwind.css

文件中并且它可以工作：

@tailwind base;
@tailwind components;
@tailwind utilities;

.pagy-nav {
  @apply flex space-x-2;
}

但是，我想将

.pagy-nav

代码放入单独的CSS文件pagy.css中（以更加干净/有条理）。有办法做到吗？

Answer 1

@import

自 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;

或者将所有内容切换为导入：

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "./pagy_nav.css";