Skip to main content

​
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
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
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:
OptionAliasDescriptionDefault
--input-iInput CSS file-
--output-oOutput CSS file- (stdout)
--watch-wWatch for changes and rebuildfalse
--minify-mOptimize and minify the outputfalse
--optimize-Optimize without minifyingfalse
--map-Generate source mapfalse
--cwd-Current working directory.

​
Using with Vite

For Vite projects, install the Vite plugin: 
npm install @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
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

​
Create Your CSS File

Create a CSS file that imports Tailwind’s styles: 
@import 'tailwindcss';
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>

​
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

1

Quick Start Guide

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

Editor Setup

Set up IntelliSense in your editor for autocomplete and linting.
3

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:
  1. Ensure you’re using the --watch flag with the CLI
  2. Check that your source files are in the correct directory
  3. 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.

Build docs developers (and LLMs) love

Get started for freeTalk to us