Apply a style to a children with Tailwind

Apr 10, 2023

Learn how to apply a Tailwind style to all child elements of an element using the [&>*] arbitrary variant, or the newer *: variant in Tailwind 3.4.

~~~

UPDATE: use *: as of Tailwind 3.4

It doesn’t happen often, but sometimes I wonder, how do I apply a style to a child element, with Tailwind?

The next time this happens, I’ll have this blog post explain it to me.

You can use this class name to apply the bg-gray-300 class (for example) to all child elements of the current element:

[&>*]:bg-gray-300

Like this:

<div class="[&>*]:bg-gray-300">....</div>

~~~