Is there a way to chain multiple tailwind css classes on a single hover instance?

Question

I was wondering if there is a way to chain multiple tailwind css classes on a single hover instance on an html element instead of using multiple hover instances.

For instance instead of this

<button class="hover:bg-blue-900 hover:text-white"></button>

whether you can have this or something else

<button class="hover:bg-blue-900:text-white"></button>

Answer 1

No there isn't. As from the docs(https://tailwindcss.com/docs/hover-focus-and-other-states), you can see they themselves add multiple classes for focus/hover.

However you can create reusable styles to counter this

Answer 2

Unfortunately, we can't do variant grouping in tailwind CSS. So to answer your question, As of now, there is no way to chain multiple tailwind classes on a single hover or any other pseudo-classes instance. The reason behind it is, it creates performance issues at the end.

According to Adam Wathan, the creator of TailwindCSS:

Although the grouped syntax looks like less code when you're authoring it, it actually creates both a bigger CSS file and a bigger HTML file in production, making it a very black-and-white performance anti-pattern. It's nicer to write though, and the performance cost isn't a huge one, so still a chance we develop it further just for the developer experience for the people who like it. But admittedly hesitant to encourage anything that's bad for performance.

Alternatively, We can use different strategies for reusing styles in our project which is described in the tailwind documentaion which is also mentioned earlier by @amunim.

Please read the whole tweet and form for more details: https://twitter.com/adamwathan/status/1461519820411789314 https://github.com/tailwindlabs/tailwindcss/discussions/8337