TailwindCSS 使用@apply 和占位符颜色

Question

我正在尝试在 TailwindCSS 中将 @apply 与占位符颜色一起使用，但由于某种原因，它似乎不起作用，尽管我可以将 @apply 一起使用与其他属性。我还可以将占位符颜色选项用作 CSS class。它只是不适用于 @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。如果您查看 placeholder docs，它在每个 class 定义后以浅灰色显示。

因为你不能 @apply class 使用伪选择器，你需要将伪选择器添加到你的代码中，就像这样（注意你需要在此处使用文本颜色实用程序):

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

Answer 2

对于 v2.1.4 ...

默认情况下，不为任何核心插件启用活动变体。也许它的实际定义包括一个伪选择器，如 :hover、:active 等。您可以在 tailwind.config.js 文件的变体部分控制是否为插件启用活动变体：

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    extend: {
      backgroundColor: ['active'],
    }
  },
}

Read here for Tailwind - Hover, Focus, & Other States

TailwindCSS 使用@apply 和占位符颜色

TailwindCSS use @apply with placeholder color

tailwind-css