Blog

Variants, Custom Utilities and Modern CSS: group/peer, data-*/aria-*, @container, starting:, @utility and @variant

Every Tailwind variant adds a selector or an at-rule; group-hover also reacts to an outer group's hover when groups are nested, which is why named groups like group/card are needed. With Bookstore's filter and card examples we measure peer, has-*, not-*, in-*, headless styling with aria-expanded and data-[state], @container and v4.3's @container-size, a popover animation with starting:, logical and scrollbar utilities, @utility (--default), @variant and @custom-variant in Playwright.