Skip to main content

Setup

In this chapter, you set up a Tailwind CSS v4 development environment.

Supported browsers​

Tailwind CSS v4 supports the following browsers.

  • Safari 16.4 or later
  • Chrome 111 or later
  • Firefox 128 or later
Dependency on modern CSS

v4 depends on modern CSS features such as @property and color-mix(), so it does not work in older browsers.

A v4-supported browser has all the modern CSS features

On these browser versions, all the modern CSS features covered in this guide (container queries, the :has() selector, the svh/dvh viewport units, the oklch color space, etc.) are supported. As long as you target a v4-supported browser, you do not need to worry about compatibility for individual features.

Setting up in a Vite project​

Creating the project​

npm create vite@latest tailwind-project -- --template react-ts
cd tailwind-project
npm install

Installing Tailwind CSS​

npm install -D tailwindcss @tailwindcss/vite

Updating the Vite config​

vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

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

Configuring the CSS file​

src/index.css
@import "tailwindcss";

Checking that it works​

src/App.tsx
function App() {
  return (
    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
      <h1 className="text-4xl font-bold text-blue-600">
        Hello Tailwind CSS!
      </h1>
    </div>
  )
}

export default App

Start the dev server.

npm run dev

Setting up with PostCSS​

If you do not use the Vite plugin, use the PostCSS plugin.

Installation​

npm install -D tailwindcss @tailwindcss/postcss postcss

PostCSS config​

postcss.config.js
export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

CSS file​

src/index.css
@import "tailwindcss";

Setting up with the CLI​

If you use it without a build tool, use the CLI.

Installation​

npm install -D tailwindcss @tailwindcss/cli

Creating the input CSS​

src/input.css
@import "tailwindcss";

Build command​

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

Using the CDN (for development)​

For prototyping or learning, you can also use the CDN.

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body>
  <h1 class="text-3xl font-bold text-blue-500">Hello!</h1>
</body>
</html>
The CDN is not recommended for production

Limit it to development and prototyping.

VS Code extension​

Tailwind CSS IntelliSense​

The official extension, which provides the following features.

  • Autocomplete for class names
  • CSS preview on hover
  • Syntax error detection
  • Syntax highlighting

Installation:

  1. Open the Extensions panel in VS Code
  2. Search for "Tailwind CSS IntelliSense"
  3. Install it
.vscode/settings.json
{
  "tailwindCSS.experimental.classRegex": [
    ["clsx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
  ],
  "editor.quickSuggestions": {
    "strings": true
  }
}

Prettier integration​

For automatic class sorting, use the Prettier plugin.

npm install -D prettier prettier-plugin-tailwindcss
.prettierrc
{
  "plugins": ["prettier-plugin-tailwindcss"]
}

Project structure​

A recommended project structure.

project/
├── src/
│   ├── components/
│   │   ├── Button.tsx
│   │   └── Card.tsx
│   ├── index.css      # @import "tailwindcss"
│   ├── App.tsx
│   └── main.tsx
├── vite.config.ts
├── postcss.config.js  # When using PostCSS
└── package.json

Preparing for production​

Build command​

npm run build

At build time, Tailwind CSS v4 emits only the classes used in your project into the CSS.

The content array is no longer needed (v3 → v4)

In v3 you had to specify the files to scan with a content array in tailwind.config.js. In v4, the Vite plugin or @tailwindcss/postcss detects your source files automatically, so no manual configuration is needed.

A guideline for build size​

For a typical project, the production CSS is around 10–30 KB after gzip. Unused classes are removed automatically, so no matter how many utilities you try out during development, it does not affect the final file size.

Framework-specific setup notes (Next.js / Nuxt)

Next.js​

npm install tailwindcss @tailwindcss/postcss postcss
postcss.config.mjs
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};
app/globals.css
@import "tailwindcss";

Nuxt​

npm install tailwindcss @tailwindcss/vite
nuxt.config.ts
import tailwindcss from "@tailwindcss/vite";

export default defineNuxtConfig({
  css: ["~/assets/css/main.css"],
  vite: {
    plugins: [tailwindcss()],
  },
});
assets/css/main.css
@import "tailwindcss";
The @nuxtjs/tailwindcss module is on the v3 line

The @nuxtjs/tailwindcss module depends on the Tailwind CSS v3 line, so for v4 you use the @tailwindcss/vite plugin directly, as in the official instructions.

Summary​

  • Configure Tailwind CSS v4 with the Vite plugin or PostCSS
  • Import it with @import "tailwindcss"
  • Use the VS Code extension for completion and error detection
  • Auto-sort classes with the Prettier plugin
  • Supported browsers: Chrome 111+, Safari 16.4+, Firefox 128+
  • Unused CSS is removed automatically in the production build