Class on different states are not being applied to those states.

I have just checked and can confirm that it also works in your example.

• First add a class to your component, e.g. .text-blue-on-hover
• Next, select the state you want to modify, e.g. hover
• Now for instance change the color of the text to blue

Result: Every time you hover over your component, the text is turned blue.

Side note: The following css (or similar) is created automatically:

.text-blue-on-hover:hover {
    color: blue;
}

Now I get that, it works perfectly fine, I just didn't know that how it works.

Thanks @NicoEngler for you this fast reply and clearing me out :)

The class is applied regardless of the components state. Based on that, you can select a state, e.g. hover and style your class in that particular state. Effectively the following css will be created if you select the state hover and color your text red.

.text-red:hover {
    color: red;
}

I hope that clears up the confusion.