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

Example:

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

Attempted:

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.

Ive tried searching but I'm going in circles and I just have alot 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 seperate .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 exprecting 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.

Using Next.js Tailwind

CodePudding user response：

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

CodePudding user response：

Hi its a setting problem check your index.css file

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

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