cssnext.jshovertailwind-css

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

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.

Solution

  • 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!