Jeremy Luscombe

Apply a tailwind class based on descendent state

You can apply css classes to parent elements if any of the parent's descendents meet a certain condition using the has() selector.

Extending this to Tailwind is easy. A use case I came against recently was this: we have a header with a class that's passed dynamically using React state. The class is scroll-locked, used to indicate that the mobile menu has been toggled and that whole app should be scroll locked, i.e overflow: hidden.

Instead of prop drilling and passing state from the <header> to the <body>, which is where we want to scroll lock, we can use the has() selector on the <body> to apply a class only when the <header className="scroll-locked">.

The css for this is:

<body className="has-[header.scroll-locked]:truncate">

has-* is a Tailwind modifier and what we pass in the [square brackets] is just css selector. : is used as a separator between different parts of a utility class name.