-
|
I would like to be able to do this: <main class="html-bg-red-500" /> // I want to add the utility in the element itself, not the html tag.and generate this css html:has(.html-bg-red-500) {
background-color: var(--color-red-500)
}Why? I have many routes and each route has its own background color. Without setting the bg color on the html, hard scrolling reveals a different color in the background. Is this doable? |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 1 reply
-
|
https://tailwindcss.com/docs/hover-focus-and-other-states#has |
Beta Was this translation helpful? Give feedback.
-
|
Yep! <html class="has-[.html-bg-red-500]:bg-red-500">Or you could even style the <html>
…
<main class="[html:has(&)]:bg-red-500">You could then abstract this to a variant, if you wanted, like: @custom-variant html (html:has(&));<main class="html:bg-red-500"> |
Beta Was this translation helpful? Give feedback.
-
|
Beautiful! Thank you! |
Beta Was this translation helpful? Give feedback.
Yep!
Or you could even style the
<html>element from<main>like:You could then abstract this to a variant, if you wanted, like: