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

【问题标题】：TailwindCSS use @apply with placeholder colorTailwindCSS 使用带有占位符颜色的 @apply
【发布时间】：2020-03-29 18:46:52
【问题描述】：

我正在尝试在 TailwindCSS 中将 @apply 与占位符颜色一起使用，但由于某种原因，尽管我能够将 @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.

【问题讨论】：

标签： tailwind-css

【解决方案1】：

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

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

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

【讨论】：

【解决方案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

【讨论】：