Get Started with Tailwind CSS — Tailwind CSS Tutorial

Option 1: the Play CDN (for learning and prototypes)

Add one script tag and start writing classes. It compiles in the browser, so it's for experiments, not production:

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
  </head>
  <body>
    <h1 class="text-3xl font-bold underline">Hello world!</h1>
  </body>
</html>

The examples on this site work the same way, so everything you see here also works in such a file.

Option 2: Vite (React, Vue, Svelte, Laravel and more)

npm install tailwindcss @tailwindcss/vite

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

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

/* src/style.css: the only line you need */
@import "tailwindcss";

Option 3: the Tailwind CLI (any project)

npm install tailwindcss @tailwindcss/cli
npx @tailwindcss/cli -i ./src/input.css -o ./dist/output.css --watch

Then link dist/output.css in your HTML. There's also a PostCSS plugin (@tailwindcss/postcss) for tools such as Next.js, and a webpack plugin (@tailwindcss/webpack, 4.2+).

How Tailwind finds your classes

Tailwind scans your project files (HTML, JSX, Vue, PHP templates…) for class names and generates CSS only for the ones you use. In v4 this is automatic: no content configuration. Because it reads files as plain text, write class names in full (more on this in best practices).

Your first page

<main class="min-h-48 grid place-items-center bg-gray-50 p-8"> <div class="text-center"> <h1 class="text-3xl font-bold underline decoration-sky-500 decoration-4 underline-offset-4">Hello world!</h1> <p class="mt-3 text-gray-600">My first page styled with Tailwind CSS.</p> </div> </main>

Test yourself

In Tailwind CSS v4, what do you put in your main CSS file?

@import "tailwindcss";

@tailwind base; @tailwind components; @tailwind utilities;

module.exports = { content: [] }

Nothing; Tailwind needs no CSS file

Show answer

Answer: @import "tailwindcss";

v4 uses a single CSS import; the three @tailwind directives were the v3 setup.