Tailwind CSS

A form element has states that are not driven by the pointer. A disabled button cannot be clicked. A checked checkbox is selected. A required input must be filled. A valid input passes validation. An invalid input fails it. These states are part of the element, not of the interaction, and Tailwind exposes them as…

A structural variant applies a utility based on the element’s position among its siblings or its content. The first child, the last child, the odd children, the even children, the only child, the empty element. These are the :first-child, :last-child, :nth-child(odd), :nth-child(even), :only-child, and :empty pseudo-classes, and Tailwind exposes each as a variant. They are…

A variant applies a utility when a condition is true. The not-* variant applies a utility when a condition is false. It is the negation of a pseudo-class, and it is the tool for the styling that needs to apply to everything except a specific state or position. The not-first:mt-4 applies a top margin to…

A variant applies a utility based on the element’s own state. The hover: variant applies when the element is hovered. But sometimes the state belongs to a different element. A card’s child should change when the card is hovered. A label should change when the input next to it is focused. A dropdown should open…

A group is a parent. A peer is a sibling. The group-hover: variant applies when the nearest group is hovered, and the peer-focus: variant applies when the nearest peer is focused. The word “nearest” is the problem. When groups are nested, or when a parent has multiple peers, the nearest one is not always the…

Every Tailwind utility you have written so far applies at every screen size. A flex class makes an element a flex container on a phone, a tablet, and a widescreen monitor. A text-lg class sets the font size to 1.125rem regardless of how much horizontal space is available. This is fine for simple layouts, but…

Tailwind’s default breakpoints cover the common screen sizes, but they are not universal. A design system may need a 3xl breakpoint at 1920px for large monitors. A component library may need a xs breakpoint at 320px for small phones. And increasingly, components need to respond not to the viewport at all, but to the width…

Dark mode is no longer a nice-to-have. Operating systems ship with it, browsers expose it, and users expect it. Tailwind’s dark: variant makes it straightforward to write styles that change when dark mode is active: bg-white dark:bg-gray-900 produces a white background in light mode and a dark gray one in dark mode. The syntax is…

Not every responsive concern is about screen width. A phone held upright has a different shape than the same phone turned sideways. A user who has enabled reduced motion in their operating system expects animations to be gentler or absent. A printed page has different constraints than a screen — colors may not render, interactive…

Tailwind’s built-in variants — hover:, md:, dark:, group-hover: — cover the common cases. But they cannot cover every case. What if you need to style the third item in a list? What if you need to target a child element that has no class of its own? What if you need to apply a utility…