TailwindCSS焦点+ CSS文件中的占位符

Question

是否可以将类focus:placeholder-gray-600从HTML移到CSS文件中？

从以下HTML

<input class="focus:placeholder-gray-600" type="text"> 

我想拥有

<input class="my-class" type="text"> 

#styles.css

.my-class {
  ...
}

Answer 1

是的，您可以使用顺风的CSS来做到这一点，而不仅仅是CSS文件。

您需要使用PostCSS处理CSS文件，然后按照

下的文档中概述的步骤进行操作

基本思想是，使用顺风提供的@apply postcss指令：

<style>
.my-class:focus {
  @apply placeholder-gray-600;
}
</style>

请注意，focus方面必须像在类声明中使用伪选择器的“常规” css中那样使用，而不是这样做：

/** INVALID **/
.my-class {
  @apply focus:placeholder-gray-600;
}

另请参阅文档中的此注释：

  

请注意，不能直接应用诸如hover：，focus：和{screen}：之类的变体，因此，应将实用程序的普通版本应用于适当的伪选择器或媒体查询。