Getting Started with Tailwind CSS

This section documents Tailwind CSS v4.x — the CSS-first configuration line, whose v4.0 release shipped in January 2025 — as published at the official Tailwind CSS documentation, which is the reference these pages are written and verified against. No specific patch version is pinned.

This content was generated with the assistance of AI and should be verified against the official documentation before being relied on in production, since Tailwind iterates quickly.

This section’s bibliography lists the reference material consulted while preparing these pages.

Tailwind CSS is a utility-first framework: you style elements by composing small single-purpose classes directly in your markup. This page covers what that means, how to install Tailwind v4, how to set up your editor, and which browsers it supports.

Utility-first vs. component frameworks

A component framework such as Bootstrap ships ready-made semantic classes — you write <button class="btn btn-primary"> and inherit a designed component, then override its CSS wherever the design diverges. Tailwind instead gives you low-level utilities — roughly one class per declaration — that you compose into the exact component you want (inline-flex rounded-md bg-sky-600 px-4 py-2 text-sm font-semibold text-white hover:bg-sky-500); there is no btn rule to fight, custom values come from your theme rather than from a growing override stylesheet, and because every state (hover:, focus:, md:, dark:) is expressible as a prefixed utility you "rapidly build modern websites without ever leaving your HTML" — the styling decisions happen in the template you are already editing, not in a separate CSS file you switch to.

<!-- component framework: one semantic class, styling hidden in a stylesheet -->
<button class="btn btn-primary">Save changes</button>

<!-- utility-first: the same button composed from utilities, styling visible inline -->
<button class="inline-flex items-center rounded-md bg-sky-600 px-4 py-2
               text-sm font-semibold text-white shadow-sm
               hover:bg-sky-500 focus-visible:outline focus-visible:outline-2">
  Save changes
</button>

Installation

Tailwind v4 has one build engine with several entry points. Pick by how your project already builds CSS.

Vite plugin (recommended)

If you use Vite, add @tailwindcss/vite. It is the fastest path and needs no PostCSS configuration.

npm install tailwindcss @tailwindcss/vite

// vite.config.js
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

See Installing Tailwind CSS with Vite.

PostCSS

For toolchains built on PostCSS (Webpack, Next.js, the Angular CLI, and similar), use @tailwindcss/postcss.

npm install tailwindcss @tailwindcss/postcss postcss

// postcss.config.mjs
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
}

See Installing Tailwind CSS as a PostCSS plugin.

Tailwind CLI

The CLI compiles CSS with no bundler at all — good for a simple site, an email template, or a one-step build.

npx @tailwindcss/cli -i input.css -o output.css --watch

A standalone executable is also published for each platform, so Tailwind can run on a machine with no Node.js installed:

# download the tailwindcss binary for your platform, then:
./tailwindcss -i input.css -o output.css --watch

See Installing the Tailwind CSS CLI.

Framework guides

The docs carry step-by-step guides for Next.js, Nuxt, SvelteKit, Angular, Laravel, Rails, Astro, and more, each wiring Tailwind into that framework’s own build. See Framework guides.

Play CDN

For a prototype with no build step, pull the engine straight from a <script> tag. It compiles in the browser — fine for a pen or a bug repro, but not for production. In v4 the Play CDN ships as the @tailwindcss/browser package (the v3 cdn.tailwindcss.com host does not serve v4):

<script src="https://unpkg.com/@tailwindcss/browser@4"></script>

See Play CDN.

The stylesheet and HTML starter

In v4 the whole framework is pulled in with a single CSS @import. This replaces v3’s three @tailwind directives.

/* app.css -- Tailwind v4 */
@import "tailwindcss";

/* v3 equivalent, no longer used:
   @tailwind base;
   @tailwind components;
   @tailwind utilities; */

Load the compiled stylesheet and start writing utilities:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/dist/app.css" rel="stylesheet">
  </head>
  <body>
    <h1 class="text-3xl font-bold underline">Hello Tailwind</h1>
  </body>
</html>

Editor setup

Tailwind CSS IntelliSense — the official VS Code extension: class-name autocomplete, hover previews of the generated CSS, linting, and colour swatches. It is powered by a Language Server (@tailwindcss/language-server), so the same features work in Neovim, Zed, and other LSP-capable editors.
prettier-plugin-tailwindcss — a Prettier plugin that sorts utility classes into Tailwind’s recommended order automatically on format.

npm install -D prettier prettier-plugin-tailwindcss

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

See Editor setup.

Compatibility

Tailwind v4 targets modern browsers and leans on recent CSS features — notably @property and color-mix() — for things like the / opacity modifier and the theme variables. The support baseline is:

Browser	Minimum version
Safari	16.4+
Chrome	111+
Firefox	128+

Browser

Minimum version

Safari

16.4+

Chrome

111+

Firefox

128+

On an older browser a Tailwind stylesheet still loads, but effects that depend on those features (opacity modifiers, some colour and gradient handling) degrade or drop out; there is no build-time transpile-to-old-CSS path, so a project that must support older engines should stay on Tailwind v3. The generated CSS is otherwise standard cascade layers and custom properties — see HTML & CSS for the underlying platform features.

/* the kind of modern CSS Tailwind v4 emits */
@property --tw-bg-opacity {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}

.bg-sky-500\/75 {
  background-color: color-mix(in oklab, var(--color-sky-500) 75%, transparent);
}

See Compatibility.