Foundations

Tailwind CSS

A utility-first CSS framework: small, composable classes in markup instead of large hand-written stylesheets for every component.

What it is

Tailwind provides a constrained design token system expressed as class names (spacing, color, layout, typography). You style by composing utilities, often with a build step that purges unused CSS.

Why it matters

It keeps styling local and consistent, speeds up iteration, and scales well when many contributors touch UI. Changes are visible without hunting across separate CSS files.

When to use it

Use it when you want fast UI iteration with a shared scale and minimal custom CSS. It fits especially well with component-based frameworks and design systems that map tokens to utilities.

How it fits in the stack

It lives in the presentation layer alongside your components. It does not replace semantic HTML, accessibility decisions, or component structure. It helps you apply consistent visual rules quickly.

Common confusion

Tailwind is not “inline styles only.” It is a structured utility system with a design constraint. It is also not a component library: you still build or adopt components; Tailwind styles them.