Scrollbars are the most overlooked part of a web interface until they are wrong. A bright default scrollbar on a dark theme ruins the design. A scroll container without a visible scrollbar leaves the user unsure whether the content is scrollable. Tailwind provides utilities for styling the scrollbar itself, and modern CSS provides scroll-driven animations…
Rectangles are the default shape of the web. Every element is a box, and every box has four straight edges. The clip-path property and the CSS masking properties break that default. A clip path removes everything outside a geometric shape, and a mask applies an image or a gradient as an alpha channel. Tailwind exposes…
The View Transitions API is a browser feature that captures the old and new states of a page and animates between them. It produces smooth transitions between routes, between the themes, and between the states of a component, with the browser handling the snapshots and the crossfade. Tailwind does not ship the built-in utilities for…
Tailwind ships four animations by default: animate-spin, animate-ping, animate-pulse, and animate-bounce. They cover the common loading and attention states, and they are enough for a prototype. A production interface needs more: a notification that slides in and settles, a modal that scales up and fades, a skeleton that shimmers, a checkmark that draws itself. The…
A Web Component is a custom element with its own encapsulated DOM. The shadow root is the boundary: the styles inside do not leak out, and the styles outside do not leak in. That encapsulation is what makes a component reusable across applications, and it is also what makes Tailwind’s global stylesheet invisible to the…
A micro-frontend splits a large application into independently deployed pieces. Each piece is owned by a different team, built by a different pipeline, and loaded into the same page. The JavaScript is separated by the module federation or the iframe, and the CSS is the hard part. Two teams that both ship a global stylesheet…
Tailwind’s plugin system is the extension point that turns the framework from a fixed utility set into a customizable engine. A plugin is a JavaScript function that receives the Tailwind API and registers new utilities, components, variants, or base styles. The plugin API is the same API that the core uses, which means a custom…
The static utilities cover the fixed values. The dynamic utilities cover the values the developer chooses at the class-name level. The matchUtilities and the matchComponents functions are the mechanisms: they take a name prefix and a function, and the function produces the CSS from the value the class name supplies. A plugin that registers text-shadow…
A variant is the prefix that modifies a utility. The hover: applies the utility on hover, the md: applies it at the medium breakpoint, and the dark: applies it in the dark theme. Tailwind ships the common variants, and the addVariant and the matchVariant functions are the mechanisms for the custom ones. The variant is…
Tailwind CSS v4 is a ground-up rewrite of the framework, and the center of that rewrite is Oxide, a high-performance engine built in Rust. The previous versions ran a JavaScript-based JIT compiler through PostCSS, and the v4 engine replaces it with a native binary that parses CSS, scans the source files, and generates the utilities….