Descendant variant (* and **)

Applying the same styles to multiple child elements can be tedious and error-prone. Fortunately, TailwindCSS provides a solution with the * and ** variants.

The * variant applies styles to all direct child elements of a parent, while the ** variant applies styles to all child elements and their descendants.

Example without Descendant variant

In this example, we apply the same styles to each child element individually:

<div class="flex -space-x-1">
    <img class="h-10 w-10 rounded-full ring-2 ring-white object-cover dark:ring-gray-900" src="https://avatars.githubusercontent.com/u/47919550?v=4" alt="" />
    <img class="h-10 w-10 rounded-full ring-2 ring-white object-cover dark:ring-gray-900" src="https://avatars.githubusercontent.com/u/55670723?v=4" alt="" />
    <img class="h-10 w-10 rounded-full ring-2 ring-white object-cover dark:ring-gray-900" src="https://avatars.githubusercontent.com/u/31113941?v=4" alt="" />
    <img class="h-10 w-10 rounded-full ring-2 ring-white object-cover dark:ring-gray-900" src="https://avatars.githubusercontent.com/u/99137927?v=4" alt="" />
    <img class="h-10 w-10 rounded-full ring-2 ring-white object-cover dark:ring-gray-900" src="https://avatars.githubusercontent.com/u/68236786?v=4" alt="" />
</div>

Example with *

Using the * selector, we can apply the same styles to all child elements with a single class on the parent:

<div class="flex -space-x-1 *:h-10 *:w-10 *:rounded-full *:ring-white *:ring-2 *:object-cover dark:*:ring-gray-900">
    <img src="https://avatars.githubusercontent.com/u/47919550?v=4" alt="" />
    <img src="https://avatars.githubusercontent.com/u/55670723?v=4" alt="" />
    <img src="https://avatars.githubusercontent.com/u/31113941?v=4" alt="" />
    <img src="https://avatars.githubusercontent.com/u/99137927?v=4" alt="" />
    <img src="https://avatars.githubusercontent.com/u/68236786?v=4" alt="" />
</div>

Deep Descendants with **

Note: The ** descendant variant is only available in Tailwind CSS v4.0 and later.

Using Tailwind’s ** variant, you can style all nested elements at any depth - not just direct children. This is particularly useful for HTML-only projects where you need to style deeply nested elements without writing additional classes:

<!-- All text elements will be gray and turn dark on hover -->
<div class="**:text-gray-500 **:hover:text-gray-900">
    <div>
        <p>This text is gray</p>
        <div>
            <p>This nested text is also gray</p>
            <span>And this one too!</span>
        </div>
    </div>
</div>

By using Tailwind’s * and ** variants, you can write cleaner HTML markup without needing a JavaScript framework. This is especially valuable for HTML-first projects where you want to keep your code maintainable without adding complexity.