Tailwind CSS

Tailwind CSS is a styling framework built from small, single-purpose classes for properties like spacing, color, and typography. Rather than inventing class names and maintaining separate stylesheets, developers compose styles from these utilities directly in the markup. The framework scans source files and generates only the CSS actually referenced, so the output stays minimal no matter how large the project grows. Tailwind has become the default styling choice across the React and Next.js ecosystem, and version 4.3 is the current release.

Utility-first means styling with many small building blocks instead of a few large custom rules. A card is styled with a visible string of utilities for padding, background, border, and blur, all readable at the point of use, with no detour into a separate stylesheet to understand what an element looks like. When a pattern repeats enough to deserve a name, we extract it into a React component rather than a CSS class, keeping abstractions in the language the team already works in.

export function Card({ children }: { children: React.ReactNode }) {
  return (
    <div className="rounded-2xl border border-white/10 bg-white/5 p-6 backdrop-blur-md">
      {children}
    </div>
  )
}

Version 4 rebuilt Tailwind around a faster engine that is configured entirely in CSS, with no JavaScript config file. A single import replaces the old directives, theme values are declared with the theme directive in a stylesheet, and source files are detected automatically. The engine builds on native CSS features like cascade layers and custom properties, which simplifies overrides and keeps output compatible with the modern browser baseline. Release 4.3 adds first-party scrollbar styling utilities, closing a long-standing gap that previously needed plugins.

A design token is a named decision, like your exact brand yellow or the spacing between sections, stored where code can use it. In version 4 these tokens live as CSS custom properties under the theme directive: colors, spacing, fonts, and breakpoints declared there become utility classes automatically, and the same properties are readable in hand-written CSS when needed. One declaration drives everything, so your palette and type scale exist in exactly one place and can never disagree with themselves.

We configure Tailwind through the version 4 CSS-first approach with no JavaScript config file. The Devyst palette, typography scale, and 8px spacing grid are declared as theme custom properties in the global stylesheet, so the design system is enforced by the build itself. Inline styles are never used; everything is expressed as utilities or CSS variables. The yellow accent is treated as a deliberately named token reserved for primary calls to action and hover states, which is how it stays special instead of spreading everywhere.

More than half of your visitors are on phones, so responsive behavior is not optional. Tailwind works mobile-first: unprefixed utilities apply everywhere, and prefixed variants like md and lg take over from a breakpoint upward, making the responsive behavior of any element readable from its class list alone. Container queries, core in version 4, let components respond to the size of their container rather than the whole screen. We test every component across breakpoints as it is built, not after the layout is finished.