Install Tailwind CSS Complete Setup Guide 2026

Install Tailwind CSS v4 in your project with our step-by-step installation guides. Whether you use Vite, CDN, PostCSS, or a specific framework like React or Next.js, we cover every setup method with clear, copy-paste-ready commands and configuration examples.

Jump To

Install Tailwind CSS with Vite (Recommended)

Vite is the recommended build tool for Tailwind CSS v4 projects. The dedicated @tailwindcss/vite plugin provides the fastest development experience with instant hot module replacement.

Step 1: Create a New Vite Project

Scaffold a new project using the Vite CLI. Choose your preferred framework when prompted.

bash
npm create vite@latest my-project -- --template react
cd my-project

Step 2: Install Tailwind CSS and the Vite Plugin

Install Tailwind CSS v4 along with its dedicated Vite plugin as development dependencies.

bash
npm install -D tailwindcss @tailwindcss/vite

Step 3: Configure the Vite Plugin

Add the Tailwind CSS plugin to your vite.config.ts configuration file.

typescript
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

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

Step 4: Import Tailwind CSS in Your Stylesheet

Add the Tailwind CSS import to your main CSS file (usually src/index.css).

css
@import "tailwindcss";

Step 5: Start Building

Launch your development server and start using Tailwind CSS utility classes.

bash
npm run dev
html
<h1 class="text-3xl font-bold text-blue-500">
  Hello, Tailwind CSS!
</h1>

Install Tailwind CSS with PostCSS

If your project uses webpack, Parcel, Rollup, or another build tool with PostCSS support, use the @tailwindcss/postcss plugin.

bash
npm install -D tailwindcss @tailwindcss/postcss

Create or update your postcss.config.mjs file:

javascript
export default {
  plugins: [
    "@tailwindcss/postcss",
  ],
}

Then import Tailwind CSS in your main stylesheet:

css
@import "tailwindcss";

Install Tailwind CSS via CDN

For quick prototyping and experimentation, you can use the Tailwind CSS CDN script without any build step. This method is not recommended for production deployments.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind CSS CDN Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <h1 class="text-3xl font-bold text-center mt-10">
    Hello Tailwind CSS!
  </h1>
</body>
</html>
⚠️ Production Warning

The CDN version cannot tree-shake unused styles and will be significantly larger than a properly built Tailwind CSS bundle. Use it only for prototyping and learning, not production websites.

Installation Method Comparison

Compare the three main approaches to installing Tailwind CSS to choose the best option for your project.

FeatureVite PluginPostCSSCDN
Setup Time~2 min~3 min~30 sec
Build Performance★★★★★★★★★☆N/A
Tree Shaking✓ Yes✓ Yes✗ No
HMR Support✓ Instant✓ Standard✗ Full reload
Production Ready✓ Yes✓ Yes✗ No
Custom Config✓ CSS @theme✓ CSS @themeLimited

Framework-Specific Tailwind CSS Guides

Choose your framework for detailed, step-by-step Tailwind CSS integration instructions.

⚡ Tailwind CSS + Vite
Complete Vite setup guide with React, Vue, and Vanilla JS examples.
Read guide →
☁️ Tailwind CSS CDN
Quick CDN setup for prototyping without build tools.
Read guide →
⚛️ Tailwind CSS + React
Full React and Next.js integration guide.
Read guide →

Frequently Asked Questions

Common questions about installing and configuring Tailwind CSS.

The fastest way to install Tailwind CSS in 2026 is using the Vite plugin. Run npm install -D tailwindcss @tailwindcss/vite, add the plugin to your vite.config.ts, and import tailwindcss in your CSS file. The entire process takes under 2 minutes.
Yes, Tailwind CSS offers a CDN script for quick prototyping without any build tools. Add the Tailwind CSS CDN script tag to your HTML file and start using utility classes immediately. However, the CDN approach is not recommended for production since it cannot tree-shake unused styles.
No, Tailwind CSS v4 eliminates the need for a separate configuration file. All customization is done directly in your CSS using the @theme directive. Tailwind v4 uses automatic content detection, removing the need for manual content path configuration.
Next.js 16 supports Tailwind CSS v4 natively. Run npm install -D tailwindcss @tailwindcss/postcss and add the @tailwindcss/postcss plugin to your postcss.config.mjs. Then import tailwindcss in your globals.css file. Next.js handles the rest automatically.
Tailwind CSS v4 requires Node.js 18 or later. The new Oxide engine, written in Rust, provides 5x faster build times but requires a modern Node.js runtime. Verify your version with node --version before installing.
To install Tailwind CSS with PostCSS, run npm install -D tailwindcss @tailwindcss/postcss. Then add @tailwindcss/postcss to your postcss.config.mjs plugins array. This method works with any build tool that supports PostCSS, including webpack, Parcel, and Rollup.

Ready to start styling? Explore the Tailwind CSS Cheat Sheet for a quick reference of all utility classes, or try the interactive playground to experiment with Tailwind CSS in real-time.