Don't Panic: Tailwind CSS

Tailwind CSS turns small styling instructions in your HTML into a stylesheet. Its utilities, classes with focused styling purposes, describe spacing, color, layout, and other visual choices. Instead of inventing a new name for every box, you assemble the box from an existing vocabulary. The HTML gets longer; the naming committee gets less work.

The key distinction is when the work happens. A build adapter, the connection to a CLI or application build tool, reads your source files and generates CSS. The browser loads that result and follows ordinary CSS rules. Tailwind does not sit inside the page making layout decisions. The browser already has that job and has accumulated quite enough opinions about it.

A second idea is the variant, a prefix that applies a utility under a condition. A medium-width prefix changes a layout once the viewport is wide enough. A hover prefix follows pointer interaction. Visible-focus styling follows keyboard focus conditions. These prefixes decorate existing conditions; they do not create a working menu or decide whether a button is disabled. Appearance and behavior still need to agree.

Responsive styling begins with the unprefixed arrangement. Add changes for larger widths as the content needs them. The medium breakpoint is a width threshold, not an identification service for medium-sized devices. Container queries take a different measurement: the space around a component. A card in a sidebar therefore need not behave like the same card across a full page.

The third idea is the theme variable, a named CSS value that defines part of the utility vocabulary. A brand color can feed backgrounds, text, and borders through one token. Repeated values belong there. Repeated markup and behavior can belong in an application component. An exceptional width can stay an arbitrary value without being promoted into a company-wide design principle.

The compiler's surprising limitation is deliberate: it reads text, not your application's intentions. A class assembled from fragments may reach the browser with no matching CSS rule. Choose complete literal class names for known alternatives. If styling disappears, follow the path from loaded stylesheet to generated selector to matching condition to winning declaration. Moving the class later in HTML does not overrule that chain.

There is also Preflight, the base reset that changes element defaults. A heading remains a heading even when its default size disappears. Supply the typography you intend, and keep the semantics that users and assistive technology rely on. Utilities have not relieved anyone of contrast or keyboard checks.

This course uses version four, with CSS-first configuration and separate build integrations. Older version-three snippets deserve an upgrade-guide check before joining the party. Read the Intro for the full arrangement, the Cheatsheet for its vocabulary, and the Exercise to observe compilation, responsive layout, dark mode, and a missing rule you can repair.

Don't Panic: Tailwind CSS

Relevant careers