[v4] How to apply css precedence in the class string?

[sureshjoshi]

Hi, I'm working on a Svelte 5+ HeadlessUI port, and ran into an issue with css precedence (rather, I just don't know how to apply it 😢)

https://github.com/RobotPajamas/headlessui-svelte/blob/button-actions/src/routes/examples/button/%2Bpage.svelte

I've tried sandwiching the hover attribute with active (data-active:bg-pink-500 data-hover:bg-gray-600 data-active:bg-pink-500), but I'm unable to get active to override. In addition I've prefixed with a !, but that doesn't seem to help (arguably hinders).

I thought to use the !important config, but it looks like that won't be supported: https://tailwindcss.com/docs/v4-beta#using-legacy-configuration-files

Here is a live example (best avoided by Safari): https://button-actions.headlessui-svelte.pages.dev/button

hover:

left-click (active is lower priority than hover):

right-click (active, but no hover):

[wongjn]

Although a bit unweildy, you could consider applying not-* variants to ensure the classes only apply when you actually want them to apply.

[sureshjoshi]

Hmm, that's an idea, but not entirely sure how that works either. Looks unwieldy, as you mentioned:

I'm guessing it would be something like this (doesn't work, but I'm assuming it's the vibe):
data-hover-not-data-active:bg-gray-600 data-active:bg-pink-500

The problem with negation is that there might be up to 5 data-* to operate with. While only maybe 3 will act on the same background or foreground, that will get really nutty.

In the past, I think I used class directives, as that would place them in a location which happened to give priority. My other option here is programmatic, where I handle each case, but again, that can be messy.