hover OR focus in Tailwind CSS-CodePudding

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

<div >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 >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?

CodePudding user response：

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.