Installing Tailwind CSS

Tailwind CSS v4 can be installed in several ways depending on your build tool and project setup. Choose the method that works best for your workflow.

Package Installation

Install Tailwind CSS from npm using your preferred package manager:

npm install tailwindcss@latest

yarn add tailwindcss@latest

pnpm add tailwindcss@latest

Tailwind CSS v4.2.1 is the latest stable version. The framework requires Node.js 14.0 or higher.

Integration Methods

Tailwind CSS can be integrated into your project in multiple ways. Choose the method that best fits your build setup.

Using the CLI

The Tailwind CLI is the simplest way to compile your CSS. Install the CLI package:

npm install @tailwindcss/cli@latest

yarn add @tailwindcss/cli@latest

pnpm add @tailwindcss/cli@latest

Then add a build script to your package.json:

package.json

{
  "scripts": {
    "build:css": "tailwindcss --input ./src/input.css --output ./dist/output.css",
    "watch:css": "tailwindcss --input ./src/input.css --output ./dist/output.css --watch"
  }
}

Use the --watch flag during development to automatically rebuild your CSS when files change.

CLI Options

The Tailwind CLI supports several options:

Option	Alias	Description	Default
`--input`	`-i`	Input CSS file	-
`--output`	`-o`	Output CSS file	`-` (stdout)
`--watch`	`-w`	Watch for changes and rebuild	`false`
`--minify`	`-m`	Optimize and minify the output	`false`
`--optimize`	-	Optimize without minifying	`false`
`--map`	-	Generate source map	`false`
`--cwd`	-	Current working directory	`.`

Using with Vite

For Vite projects, install the Vite plugin:

npm install @tailwindcss/vite@latest

yarn add @tailwindcss/vite@latest

pnpm add @tailwindcss/vite@latest

Add the plugin to your vite.config.ts:

vite.config.ts

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

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

The Vite plugin automatically detects whether to optimize CSS based on the NODE_ENV environment variable.

Vite Plugin Options

You can configure the Vite plugin with additional options:

vite.config.ts

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

export default defineConfig({
  plugins: [
    tailwindcss({
      // Disable Lightning CSS optimization
      optimize: false,
      
      // Or enable optimization without minification
      optimize: { minify: false },
    }),
  ],
})

Using with PostCSS

For PostCSS-based build tools (like Next.js), install the PostCSS plugin:

npm install @tailwindcss/postcss@latest

yarn add @tailwindcss/postcss@latest

pnpm add @tailwindcss/postcss@latest

Add Tailwind to your postcss.config.js:

postcss.config.js

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

The PostCSS plugin includes built-in @import handling, so you don’t need postcss-import.

PostCSS Plugin Options

Configure the PostCSS plugin with options:

postcss.config.js

const path = require('path')

module.exports = {
  plugins: {
    '@tailwindcss/postcss': {
      // Change source file search directory
      base: path.resolve(__dirname, './src'),
      
      // Control Lightning CSS optimization
      optimize: process.env.NODE_ENV === 'production',
      
      // Control URL rewriting
      transformAssetUrls: true,
    },
  },
}

Using with Webpack

For Webpack projects, install the Webpack plugin:

npm install @tailwindcss/webpack@latest

yarn add @tailwindcss/webpack@latest

pnpm add @tailwindcss/webpack@latest

Create Your CSS File

Create a CSS file that imports Tailwind’s styles:

@import 'tailwindcss';

@layer theme, base, components, utilities;

@import './theme.css' layer(theme);
@import './preflight.css' layer(base);
@import './utilities.css' layer(utilities);

@import 'tailwindcss';

@layer components {
  .btn {
    @apply px-4 py-2 rounded font-semibold;
  }
}

The @import 'tailwindcss'; statement imports all of Tailwind’s base styles, utilities, and default theme. This is the simplest way to get started.

Import the CSS

Import your compiled CSS file in your application:

<!doctype html>
<html>
  <head>
    <link href="/dist/output.css" rel="stylesheet">
  </head>
  <body>
    <!-- Your content -->
  </body>
</html>

import './output.css'

import './output.css'

Platform-Specific Packages

Tailwind CSS provides optimized native binaries for different platforms:

@tailwindcss/node - Node.js runtime
@tailwindcss/browser - Browser runtime (WASM)
@tailwindcss/oxide - Rust-powered scanning engine

These platform-specific packages are typically installed automatically as dependencies. You rarely need to install them directly.

Next Steps

Quick Start Guide

Follow the quickstart guide to build your first component with Tailwind CSS.

Editor Setup

Set up IntelliSense in your editor for autocomplete and linting.

Learn Core Concepts

Understand Tailwind’s utility-first approach and design philosophy.

Troubleshooting

CSS Not Updating

If your CSS isn’t updating when you make changes:

Ensure you’re using the --watch flag with the CLI
Check that your source files are in the correct directory
Restart your development server

Build Performance

For faster builds in large projects:

Use the @tailwindcss/oxide scanner (included by default in v4)
Limit the scope of source file scanning with @source directives
Enable Lightning CSS optimization only in production

Tailwind CSS v4’s new Rust-powered engine provides up to 10x faster builds compared to v3.

Getting Started

Core Concepts

Customization

Build Integration

Advanced

Upgrading

Installation

Installing Tailwind CSS

Package Installation

Integration Methods

Using the CLI

CLI Options

Using with Vite

Vite Plugin Options

Using with PostCSS

PostCSS Plugin Options

Using with Webpack

Create Your CSS File

Import the CSS

Platform-Specific Packages

Next Steps

Troubleshooting

CSS Not Updating

Build Performance

​Installing Tailwind CSS

​Package Installation

​Integration Methods

​Using the CLI

​CLI Options

​Using with Vite

​Vite Plugin Options

​Using with PostCSS

​PostCSS Plugin Options

​Using with Webpack

​Create Your CSS File

​Import the CSS

​Platform-Specific Packages

​Next Steps

​Troubleshooting

​CSS Not Updating

​Build Performance

Installing Tailwind CSS

Package Installation

Integration Methods

Using the CLI

CLI Options

Using with Vite

Vite Plugin Options

Using with PostCSS

PostCSS Plugin Options

Using with Webpack

Create Your CSS File

Import the CSS

Platform-Specific Packages

Next Steps

Troubleshooting

CSS Not Updating

Build Performance