尝试将悬停：应用于我制作的 Tailwind CSS 自定义类，但它似乎不起作用

Question

例子：

.btn {bg-blue-500 text-2 text-orange-300}
.btn2 {bg-orange-500 text-2 text-blue-300}

尝试过：

编辑：很抱歉我忘记包含我正在使用的代码......那是深夜。

< button className="btn hover:btn2"/>   <---this does not work btn2 does not actually get applied as a hover

btn当然会出现，但是悬停时，btn2样式不会出现。

如果我做了一些愚蠢的事情或者我明显错过了文档中已经说明的内容，请随时为我指出方向。

我尝试过搜索，但我在兜圈子，我只是有很多样式，我想通过在不同的状态下应用它们来改变功能，但这将是一个痛苦，因为我必须创建一个单独的.btn .btn2 btn2-hover btn-hover等。 。 ETC..

是变体问题吗？css或者它是一个按一定顺序读取的过程？难道我期望将悬停应用于所有内部，css而实际上并没有这样做？或者我需要做出一些例外吗？我很混乱。

Answer 1

答案在文档中。如果有人遇到这个问题，那么它的发生是因为我在 tailwind @components 下声明了样式，而它应该是 tailwind @utilities。

@layer utilities{
.btn {bg-blue-500 text-2 text-orange-300}
.btn2 {bg-orange-500 text-2 text-blue-300}}

然后按照您的意愿使用状态 - 例如，在本例中

<button className="btn hover:btn2"/>

以上现在就可以了！