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

Question

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

\n

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

\n

我可以将此代码放入app/assets/stylesheets/application.tailwind.css文件中并且它可以工作：

\n

@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n.pagy-nav {\n  @apply flex space-x-2;\n}\n

\n

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

\n

Answer 1

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