Question

我试图在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.

Answer 1

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

由于无法使用伪选择器来::placeholder类，因此需要将伪选择器添加到代码中，就像这样（注意，您需要在此处使用文本颜色实用程序）：

@apply

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和占位符颜色

2 个答案: