尝试将 hover: 应用于我制作的 Tailwind CSS custom-class，但它似乎不起作用
Trying to apply hover: to a Tailwind CSS custom-class I made, but it doesn't seems to work
示例：
.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 但实际上并没有这样做吗？或者我需要做一些例外吗？我一头雾水。
你只是忘了应用 Pseudo-classes 就像 :hover:
https://tailwindcss.com/docs/hover-focus-and-other-states
如果您使用 css，您可以在您的样式中使用 @apply，然后使用 tailwindcss class。在这种情况下，您还必须使用 :hover
您好，这是一个设置问题，请检查您的 index.css 文件
@tailwind base;
@tailwind components;
@tailwind utilities;
html, body, #root{
width: 100%;
height: 100%;
}
答案在文档中。如果有人遇到这个问题，那是因为我在 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"/>
以上内容现在可以使用了！
示例：
.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 但实际上并没有这样做吗？或者我需要做一些例外吗？我一头雾水。
你只是忘了应用 Pseudo-classes 就像 :hover:
https://tailwindcss.com/docs/hover-focus-and-other-states
如果您使用 css，您可以在您的样式中使用 @apply，然后使用 tailwindcss class。在这种情况下，您还必须使用 :hover
您好，这是一个设置问题，请检查您的 index.css 文件
@tailwind base;
@tailwind components;
@tailwind utilities;
html, body, #root{
width: 100%;
height: 100%;
}
答案在文档中。如果有人遇到这个问题，那是因为我在 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"/>
以上内容现在可以使用了！