How to Install Tailwind CSS

What's New in Tailwind v4

Tailwind v4 is a major rewrite. The biggest changes:

• No more tailwind.config.js — configuration happens in CSS.
• Faster build times — up to 5x faster.
• Smaller output — unused styles are removed automatically.
• Native CSS variables — theme tokens are accessible as CSS variables.
• Simpler setup — just one import and one plugin.

Option A: Install with Vite

If you're using Vite (recommended for React, Vue, and Svelte projects):

# Install Tailwind and the Vite plugin
npm install tailwindcss @tailwindcss/vite

Add the plugin to your vite.config.js:

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

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

Add the import to your main CSS file (e.g., src/index.css):

@import "tailwindcss";

That's it. Start using utility classes in your components.

Option B: Install with Next.js

For a new Next.js app, the easiest way is to let create-next-app do it:

npx create-next-app@latest my-app

When prompted, answer Yes to "Would you like to use Tailwind CSS?"

For an existing Next.js project:

# Install Tailwind and PostCSS plugin
npm install tailwindcss @tailwindcss/postcss postcss

Create a postcss.config.mjs file:

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

export default config;

Add the import to app/globals.css:

@import "tailwindcss";

Option C: Install with PostCSS (Any Framework)

For frameworks without a dedicated Tailwind plugin (Webpack, Parcel, etc.):

npm install tailwindcss @tailwindcss/postcss postcss

Create postcss.config.js:

module.exports = {
    plugins: {
        "@tailwindcss/postcss": {},
    },
};

Import Tailwind in your CSS:

@import "tailwindcss";

Verify the Installation

Add a test element to make sure everything works:

<div class="bg-blue-500 text-white p-4 rounded-lg">
    If you see blue, Tailwind is working!
</div>

If the styles apply, you're done. If not, check the troubleshooting section below.

Customize Your Theme in CSS (v4)

In Tailwind v4, you customize the theme directly in CSS using @theme:

@import "tailwindcss";

@theme {
    --color-brand: #3b82f6;
    --color-brand-dark: #1e40af;
    --font-display: "Inter", sans-serif;
    --spacing-128: 32rem;
}

Now you can use bg-brand, text-brand-dark, font-display, and p-128 in your HTML. No config file needed.