A gradient is not a color. It is an image—a smooth transition between two or more colors, painted as the background of an element. This distinction matters in Tailwind CSS because gradients live in the background-image utilities, not the background-color utilities. The syntax has evolved significantly across Tailwind versions, and the version you are using…
A border is part of an element’s geometry. An outline is a line drawn around it without affecting layout. A ring is a box-shadow that looks like a border. These three mechanisms serve different purposes, and Tailwind exposes each through a distinct set of utilities. The distinctions matter because choosing the wrong one produces layout…
A shadow is a lie about light. It suggests depth, elevation, and hierarchy on a flat screen. It is one of the most effective tools for communicating which elements float above others and which sit recessed within a surface. Tailwind provides three distinct shadow mechanisms: shadow-* for box shadows, drop-shadow-* for filter-based shadows that follow…
Transparency is not one property. It is several. An element can be semi-transparent on its own, blend with whatever sits behind it, or filter the backdrop visible through it. Tailwind exposes each of these as distinct utility families: opacity-* for the element’s own transparency, mix-blend-* and bg-blend-* for how colors combine, and backdrop-* for filters…
A transform changes how an element is drawn without changing its position in the document flow. A scaled button is still the same size in the layout. A rotated card still occupies its original rectangle. A translated tooltip still reserves its original space. This separation between layout and rendering is what makes transforms powerful: they…
For most of its history, Tailwind CSS treated 3D transforms as a gap. The 2D transforms were covered by scale-*, rotate-*, translate-*, and skew-*, but anything involving the Z-axis required arbitrary values or a community plugin. Tailwind v4 closed that gap with native utilities for perspective, axis-specific rotation, Z-axis translation, and 3D rendering contexts. These…
A transition is the difference between a state change and an animation. Without one, a hover effect snaps into place. With one, it moves. The transition properties control what changes, how long it takes, how it accelerates, and whether it starts immediately. Tailwind exposes each of these as separate utilities, and they compose the same…
A transition responds to a state change. An animation runs on its own. It starts when the element appears, loops if configured, and ends when the animation completes. Transitions are for interactions—hover, focus, active. Animations are for motion that does not depend on user input: a spinner, a pulse, a fade-in, a shake. Tailwind provides…
An element that appears on screen has no previous state to transition from. It is either in the DOM or it is not. When it enters, it snaps into place. When it leaves, it disappears. CSS transitions cannot animate this because transitions interpolate between two existing states, and the “before” state does not exist for…
A pseudo-class is a selector that matches an element based on its state or its relationship to other elements. The :hover pseudo-class matches when the pointer is over the element. The :focus pseudo-class matches when the element has keyboard focus. Tailwind exposes these as variants: a prefix that applies a utility only when the state…