hover OR focus in Tailwind CSS

Question

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 Tailwind CSS?

Frontlet

Answer 1

You may write a simple plugin to combine focus and hover into one custom variant as described in the documentation.

The key is that addVariant() allows passing in multiple selectors as rules in the second parameter:

tailwind.config = {
  plugins: [
    tailwind.plugin(function({ addVariant }) {
      addVariant('hocus', ['&:hover', '&:focus'])
    }),
  ],
}

<script src="https://cdn.tailwindcss.com/3.4.5"></script>

<input class="hocus:text-green-500" value="foo bar" />

DEMO on tailwind play

Isagogics

Have you tried aria-selected? addVariant('holected', ['&:hover', '&:aria-selected']); this does not work. – Delinda

Answer 2

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.

Tamboura

fwiw using @apply is actively discouraged unless you are making common utilities, like say a btn style – Ordinand

Answer 3

Adding to the best answer, if you need a group selector, then add a plugin:

addVariant("group-hocus", [".group:hover &", ".group:focus &"]);

And in my case, I didn't like that the focus remained after clicking on the button. Therefore, you can replace focus with focus-visible

Solange

Answer 4

You can easily add hover and focus effects to your text using inline CSS or an external CSS file. Below are examples for each method.

1. Inline CSS

<div className="hover:text-green-500 focus:text-gray-500">Your Text</div>

2. External CSS file

Add these CSS classes to your CSS file.

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

Add above defined CSS class to your text component like the below snippet.

<div className="hover-focus-text">Your Text</div>

You can choose either method based on your preferences. Inline CSS is great for quick styling, while external CSS files are beneficial for reusable CSS.

For more information, you can visit Tailwind CSS's official website https://tailwindcss.com/docs/hover-focus-and-other-states.

Spartacus

Why is this better than @KarsonJo's answer, whose TailwindCSS plugin dynamically handles the combination of hover and focus, which you can then use for anything without writing CSS? – Wrigley