Advanced Variants

Tailwind CSS Fundamentals 6 covered hover, focus, groups and peers. A variant is a selector in disguise, and v4 turns most of the useful modern selectors (:has(), :not(), :nth-child(), @starting-style) into class prefixes. This chapter goes through the ones that change how you build interfaces, and for each one it shows the selector Tailwind generates and what a browser did with it, because several of them behave differently from what the name suggests.

Named Groups and Peers

group lets a child react to an ancestor's state. The trap is nesting: group-hover: means "any ancestor with the class group is hovered". Naming the group (group/card) makes the link exact. I built a card containing an item, both groups, with three spans that react differently, and moved the pointer:

Peers work sideways: a sibling reacts to the state of an earlier sibling. They compile to the general-sibling combinator, which only looks forward in the markup. Measured with a text input marked peer/field and a paragraph on each side of it:

The paragraph before the input never reacts: ~ cannot look backwards. If a label must appear above the input, put the input first in the HTML and reorder visually (flex order or a grid). The same /name suffix applies to group-has-*, group-data-* and peer-* variants.

has-*: A Parent That Reacts to Its Children

has-* wraps CSS :has(), which finally lets a parent change based on what is inside it. The shorthand variants take the state name; the bracket form takes any selector:

This replaces a lot of JavaScript: a selected radio card, a form row that highlights when a field inside it is invalid (has-[:invalid]), a card that changes layout when it contains an image (has-[img]). Use the bracket form with a simple selector; a long selector inside has-[…] is hard to read and a sign that a data attribute (below) would be clearer.

not-*: Negation

not- inverts another variant or accepts a selector. The generated selectors show what each one really means:

Notice not-hover:: it generates two rules, the plain :not(:hover) and a media query for devices that cannot hover at all. By reading the CSS, the second one means a touch-only device receives the not-hover styling permanently. I did not test that on a phone. If you use it, think about what that device should show.

in-*: A Group Without the Class

in-* is group-* without naming an ancestor: "some ancestor matches this". It is handy for state set by a library on an element you do not control (in-data-[state=open]:flex, in-[.dark]:text-white). But there is one very easy trap:

"Some ancestor is hovered" includes body and html, so as soon as the pointer is anywhere over the page the span turns red, even though the pointer is nowhere near its parent. The same applies to in-focus: when focus is inside the page. Use in-* only with a specific ancestor (in-data-[…], in-[.class]), and use a named group for hover and focus.

nth-*: Position

Tailwind has first, last, odd, even, and the general nth-* family, which takes a number, a formula in brackets, or the last and of-type forms. I put these four on every item of a five-item list:

nth-[2n+1] and odd match the same items (1, 3, 5); nth-last-2 counts from the end, so it is item 4 of 5. Prefer these over adding classes in a loop when the pattern is purely positional (striped rows, a different first item).

*: and **:: Styling Children From the Parent

*: applies a utility to every direct child and **: to every descendant. They are tempting for lists of plain items ("every child gets padding") and they have one sharp edge, which I measured with a parent containing a plain child and a child with its own classes:

The second line is the lesson: the child's own p-8 and bg-blue-500 lost. The parent's rule has the same specificity (one class) as the child's utility and is written later in the stylesheet (in my build .p-8 was at line 188 and the *:p-2 rule at line 210), so it wins. The practical rules: use *: only for children that will never carry their own styling; do not mix it with per-child classes; and treat **: as a last resort, because it reaches every descendant including ones you add later and makes the markup hard to read (a reader looking at a child cannot see where its colour comes from).

Element State: open, inert and Popovers

Native elements keep their own state, and Tailwind has variants for it. These are the selectors:

Three notes. open: in v4 covers [open] (details, and dialogs, which I did not test), a shown popover (tested) and the :open pseudo-class in one variant, so use it instead of popover-open:: I wrote popover-open:font-bold and Tailwind generated nothing for it (no error). inert: matches the element and everything inside it ([inert] *), which is what you want for dimming a section while a modal is open. And a test-harness caveat: my scripted click on the <summary> did not toggle the details element, so I set det.open = true from script instead; the variant responded to the attribute, but I cannot confirm the click-to-toggle path in that harness.

data-* and aria-*: State Machines in Attributes

The cleanest way to style a component with several states is not a pile of conditional classes but one attribute that holds the state, with classes that react to its values. Headless UI libraries work this way (they set data-state or aria-* attributes and leave the styling to you; chapter 6). The three forms:

No class was added or removed: the script changed three attributes and the styles followed. aria-selected: is doubly useful, because the same attribute is what assistive technology reads, so the styling and the accessibility state cannot drift apart. Note that rotate-180 sets the CSS rotate property in v4, not transform: reading transform in the browser returned none in both states, which fooled me for a moment.

starting:: Entry Transitions Without JavaScript

A newly inserted element has no "before" state, so it cannot transition in. The CSS rule @starting-style supplies one, and starting: is its variant:

The element appeared at 0, was already fading in two frames later, and settled at 1, with no timer or class toggling. I tested an element inserted by script; dialogs and popovers use the same mechanism but I did not run them. It worked in Chrome 154; I did not test other browsers, so check your support target.

Direction: rtl: and ltr:

Two variants key on the text direction, and they pair with the logical utilities (ms-*, me-*, ps-*) that flip on their own:

ms-4 (margin at the start) landed on the right in a right-to-left block without an rtl: class, which is why logical utilities are preferred and rtl: is for what has no logical form. The full treatment is in chapter 9.

Hands-On Exercises