如何使 TailwindCSS @apply 规则发挥作用？

Question

我无法使用 @apply 使自定义类正常工作。我已遵循文档，但似乎顺风忽略了一些课程。我的做法有什么问题吗？

这是我的输入文件：

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

@layer components {
  .button-primary {
    @apply w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-[#f23732] text-white hover:bg-[#ff1b15] focus:outline-none focus:bg-[#ff1b15] disabled:opacity-50 disabled:pointer-events-none;
  }
  .sc-checkbox-input {
    @apply shrink-0 mt-0.5 border-gray-200 rounded text-smart-red focus:ring-smart-red;
  }

  .sc-input {
    @apply py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-smart-red focus:ring-smart-red disabled:opacity-50 disabled:pointer-events-none;
  }
}

我的观察者命令在

package.json

中看起来像这样：

"dev": "cross-env NODE_ENV=development tailwindcss --postcss -i ./src/styles.css -o ../static/css/dist/styles.css -w",

.sc-input

永远不会出现在输出 css 文件中，只有前两个类会显示 [.button-primary, .sc-checkbox-input]

这也是我的顺风配置：

module.exports = {
  content: [
    "node_modules/preline/dist/*.js",
    "../templates/**/*.html",
    "../../templates/**/*.html",
    "../../**/templates/**/*.html",
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['"Space Grotesk"', "sans-serif"],
        default: ['"Space Grotesk"', "sans-serif"],
      },
      colors: {
        "smart-red": "#F23732",
      },
    },
  },
  plugins: [
    require("@tailwindcss/forms"),
    require("@tailwindcss/typography"),
    require("@tailwindcss/aspect-ratio"),
    require("preline/plugin"),
  ],
};

我也尝试过使用

@layer base {}

，但结果相同。

Answer 1

考虑检查

sc-input

是否可以在

content

文件团覆盖的任何文件中作为完整的字符串找到。这是因为，根据文档（强调我的）：

@layer

指令通过自动将样式重新定位到相应的

@tailwind

指令来帮助您控制声明顺序，并且还为您自己的自定义CSS启用功能，例如修饰符和tree-shaking。

因此，如果 Tailwind 在它扫描的任何文件中都没有看到

sc-input

字符串，则它不会生成相应的 CSS 规则。

如果您需要生成 CSS 规则，您可以：

• 将类名添加到

  safelist

  。
• 将规则移至任意

  @layer

  之外。

---

顺便说一句，您可能还希望完全避免

@apply

并依赖您的模板引擎（如果有）。正如 Tailwind 的创建者 Adam Wathan 所推荐的：

• https://twitter.com/adamwathan/status/1226511611592085504

  坦白：Tailwind 中的

  apply

  功能基本上只是为了欺骗那些因长长的类列表而推迟尝试该框架的人。

  你几乎不应该使用它😬

  改用实用程序乱七八糟的 HTML。

• https://twitter.com/adamwathan/status/1559250403547652097

  我可以绝对肯定地说，如果我从头开始使用 Tailwind CSS，就不会有

  @​apply

  😬

  这种行为极其复杂，每个人都在努力建立正确的心理模型来理解它应该做什么，并且它鼓励了糟糕的 CSS 架构。