hover OR focus in Tailwind CSS

Issue

So I want to change the color of the text on hover or focus

<div class="hover:text-green-500 focus:text-green-500">foo bar</div>

But I was wondering if is possible to compress all in one statement, so I would not need to repeat the text-green-500 for both. I tried the code below, but it becomes an and statement instead of or.

<div class="hover:focus:text-green-500">foo bar</div>

In pure css, what I’m looking for to do would be something like this:

div:hover, div:focus {
  color: green
}

Is that possible in TailwindCSS?

Solution

You can @apply to re-use existing tailwind styles so that you don’t end-up writing color: green or whatever extra you would otherwise be writing in plain CSS>

https://tailwindcss.com/docs/functions-and-directives#apply

div:hover, div:focus {
  @apply text-green-500;
}

This way, you will also end up having less code in your class attribute.

Answered By – JavaTechnical

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published