Trying to apply hover: to a Tailwind CSS custom-class I made, but it doesn't seems to work

Question

Example:

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

Attempted:

Edit: I'm sorry I forgot to include the code I was using... it was late night.

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

btn of course appears, but upon hovering, btn2 styling does not appear.

If i'm doing something stupid or I clearly missed something already stated in the docs, feel free to just point me in the direction.

I've tried searching but I'm going in circles and I just have a lot of styles I'd like to change functionally by applying them in different states, but its going to be a pain in I have to create a separate .btn .btn2 btn2-hover btn-hover etc.. etc..

Is it a variant issue? Or is it a process that reads the css in a certain order? Could it be that I'm expecting hover to be applied to all internal css when it really doesn't do that? Or do I need to make some exception? I'm jumbled.

Answer 1

The answer was in the docs. If anyone has this problem, it occurred because I had my declared styles under tailwind @components, when it should be tailwind @utilities.

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

And then use the states as you would - for example, in this case

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

Above now will work!

Answer 2

You simply forgot to apply Pseudo-classes like :hover:

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

and if you're using css, you can use @apply in your style and then use tailwindcss class. In that case, you must also use :hover

Answer 3

Hi it's a setting problem check your index.css file

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

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