Installation

Install Tailwind CSS v4 with Vite, PostCSS, the standalone CLI or the Play CDN — plus what each of those replaced from v3.

Tailwind v4 ships as a set of focused packages. Pick the one that matches your build tool; the CSS you write is identical in all of them.

Choosing an install method#

Install with Vite#

1. Install the packages.
2. Register the plugin.
3. Import Tailwind in your CSS.
4. Run your dev server.

npm install tailwindcss @tailwindcss/vite

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

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

@import "tailwindcss";

Make sure that stylesheet is actually loaded — in a plain Vite app, import './style.css' from your entry module, or link it from index.html.

<link rel="stylesheet" href="/src/style.css">
<h1 class="text-3xl font-bold underline">Hello world!</h1>

Install with PostCSS#

npm install tailwindcss @tailwindcss/postcss postcss

const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
}

export default config

@import "tailwindcss";

Install with the CLI#

The CLI needs no bundler and no config file.

npm install tailwindcss @tailwindcss/cli

@import "tailwindcss";

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

Then link the generated file:

<link rel="stylesheet" href="/dist/output.css">

Add it to package.json so the whole team runs the same command:

{
  "scripts": {
    "dev": "npx @tailwindcss/cli -i ./src/input.css -o ./dist/output.css --watch",
    "build": "npx @tailwindcss/cli -i ./src/input.css -o ./dist/output.css --minify"
  }
}

Install with webpack#

v4.2 A first-party loader that skips the PostCSS round-trip.

npm install tailwindcss @tailwindcss/webpack

const MiniCssExtractPlugin = require("mini-css-extract-plugin")

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader", "@tailwindcss/webpack"],
      },
    ],
  },
}

Play CDN — prototypes only#

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <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>

Customise the theme with a type="text/tailwindcss" style block:

<style type="text/tailwindcss">
  @theme {
    --color-brand: oklch(0.62 0.19 264);
  }
</style>

Framework guides#

What changed from v3#

Upgrading an existing project#

npx @tailwindcss/upgrade

The codemod migrates your config to @theme, rewrites renamed utilities across your templates, and updates your CSS entry point. It requires Node.js 20+. Run it on a clean branch and read the diff — see v3 → v4 Migration for what it cannot do for you.

Verify the install#

Add a class that only exists if Tailwind compiled, then load the page:

<p class="rounded-lg bg-emerald-100 p-4 font-semibold text-emerald-900">
  Tailwind is running.
</p>

Green rounded box: you are done. Unstyled text: work through Troubleshooting.

Common mistakes#

• Forgetting to import the stylesheet. The build compiles app.css, but nothing links it. This is the single most common "Tailwind isn't working".
• Keeping the v3 PostCSS plugin name. tailwindcss in postcss.config throws in v4; it must be @tailwindcss/postcss.
• Mixing @tailwind directives with @import "tailwindcss". Use one or the other, never both.
• Installing @tailwindcss/vite in a Next.js app. Next.js uses PostCSS, not Vite.

Related topics#

• Project Setup — editor tooling and source detection
• Production Builds — minification and bundle size
• Troubleshooting — when nothing renders