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?
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.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments