尝试将悬停：应用于我制作的 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 等等..等等..

这是一个变体问题吗？或者它是一个按一定顺序读取 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"/>

上面现在就可以了！

Answer 2

您只是忘记应用伪类，例如:hover：

https://tailwindcss.com/docs/hover-focus-and-other-states

如果您使用的是 css，则可以使用 @apply 按照您的风格然后使用tailwindcss 类。在这种情况下，您还必须使用 :hover

Answer 3

您好，这是一个设置问题，请检查您的index.css 文件

@tailwind base;
@tailwind components;
@tailwind utilities;

html, body, #root{
      width: 100%;
      height: 100%;
}