-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add has-*
variants for :has(...)
pseudo-class
#11318
Conversation
How will this work on firefox? Is there a polyfill or similar? |
@Gravy59 you can find one here: https://github.com/jplhomer/polyfill-css-has Polyfills are usually outside the scope of tailwind, as TailwindCSS is purely a utility-to-CSS compiler, so I don’t think we’ll see any sort of polyfill support for this come to tailwind as a core feature, but you can still implement it on your end to make use of the utility. Personally, I think it’s better for a framework like this to be more on the bleeding edge than wait for browser compatibility so the people who want to use utilities for progressive enhancement can. |
I think there should probably be a warning when Tailwind compiles saying that Firefox still doesn't support it, with Tailwind I feel like the expectation from a lot of developers is that of not worrying too much about browser compatibility, so a heads-up would probably help a lot of folks out there! |
Are there any plans to have an inverse of the <div class="child-hover/first-link:bg-red-100">
<button class="child/first-link">First Link</button>
<button class="child/second-link">Second Link</button>
</div>
<!-- Generated CSS-->
<style>
.child-hover\/first-link\:bg-red-100:has(.child\/first-link:hover) {
background-color: #fee2e2
}
</style> |
* Add `has-*` variants for `:has(...)` pseudo-class * Update changelog * Fix mistake in test --------- Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
* Add `has-*` variants for `:has(...)` pseudo-class * Update changelog * Fix mistake in test --------- Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
* Add `has-*` variants for `:has(...)` pseudo-class * Update changelog * Fix mistake in test --------- Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
This PR adds new
has-*
,group-has-*
, andpeer-has-*
variants that add support for the:has()
pseudo-class.This is a recent CSS feature that makes it possible to style parent elements based on their descendants. Check out this great article on the Chrome Developers blog for lots of practical examples.
These are dynamic variants that accept a selector as their argument:
I've included
group-*
andpeer-*
variations as well:We've decided not to add a key for
has
to the theme configuration, and instead just recommend using arbitrary values. If it proves to be extremely useful to define aliases forhas-*
we may revisit this in the future.