​

I'm wrapping up our Radix course and came across a neat use case for Tailwind's new `has` modifier.

If you haven't used it yet, `has` lets you style parent elements based on the state of their children:

Here we're giving the root div a green border if it has any children in the :checked pseudostate. Pretty neat!

So this came up when I was working on the focus state for my Radix <Slider> demo. Typically sliders render a <Thumb> control, which is perfect for showing focus:

But this demo doesn't have a thumb, since we're recreating the iOS slider. So how should we style the focus state?

I went with the full track:

Looks good! Only one problem... the <Thumb> is still the element that receives focus, not the <Track>.

So how can we style it?

Here's the markup:

You might think we could use `peer`, since <Track> is a peer of <Thumb>:

but it turns out <Track> renders some extra elements, and the one that gets our classNames doesn't end up being a peer to <Thumb>.

Here's where it gets fun.

`has` lets us style the <Root> if the <Thumb> is focused:

...but we want to style the <Track>. If we put `group` on the root, we can then combine group and has to target the <Track>:

Voilà!

`group` lets us go up the tree from <Thumb> to <Root>, and `has` lets us go back down from <Root> to <Track>.

I love that with both of these utilities we can traverse up and down our tree to style any element based on the state of any other. Just stick `group` on the lowest common ancestor of all the elements involved and you're good to go!

Our Radix course is launching next week! We build this <Slider> and three other awesome components giving you a deep understanding of the library along the way.

You'll also learn a ton about React, Tailwind, and even some Framer Motion... but more on that next week. 😀

Have a great weekend!

– Sam and Ryan