TailwindCSS 使用带有占位符颜色的 @apply

Question

我试图@apply在 TailwindCSS 中与占位符颜色一起使用，但由于某种原因，尽管我能够@apply与其他属性一起使用，但它似乎不起作用。我还可以将占位符颜色选项用作 CSS 类。它只是不适用于@apply.

@tailwind base;

input {
  @apply placeholder-gray-900;
}

@tailwind components;

@tailwind utilities;

通过尝试这个，我最终遇到了这个错误：

`@apply` cannot be used with `.placeholder-gray-900` because `.placeholder-gray-900` either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that `.placeholder-gray-900` exists, make sure that any `@import` statements are being properly processed *before* Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS tree.

Answer 1

这是因为占位符文本已使用伪选择器::placeholder. 如果您查看占位符文档，它会在每个类定义后以浅灰色显示。

由于您不能@apply使用伪选择器进行分类，因此您需要将伪选择器添加到您的代码中，如下所示（请注意，您需要在此处使用文本颜色实用程序）：

input::placeholder {
  @apply text-gray-900;
}