How to Install Tailwind CSS v4 (Step-by-Step Guide)

Tailwind CSS has become one of the most popular utility-first CSS frameworks for building modern, responsive, and highly customizable web interfaces. With the release of Tailwind CSS v4, developers gain access to new features, improved performance, and enhanced customization options. If you’re ready to get started, this step-by-step guide will walk you through the installation process from scratch.

Step 1: Prerequisites

Before installing Tailwind CSS v4, make sure you have the following installed on your machine:

Node.js (v16 or above)
npm (comes with Node.js) or yarn
A code editor like VS Code

Tip: Check your Node.js and npm versions by running:

node -v
npm -v

🪄 Step 2: Create a New Project

You can start by creating a new project folder. Open your terminal and run:

Run the following command in your project directory:

mkdir tailwind-v4-demo
cd tailwind-v4-demo
npm init -y

Step 3: Install Tailwind CSS

Install Tailwind CSS v4 via npm (or yarn). Run:

npm install -D tailwindcss@latest postcss autoprefixer

Then, generate the Tailwind configuration files:

npx tailwindcss init -p

This will create two files in your project root:

tailwind.config.js — Tailwind configuration
postcss.config.js — PostCSS configuration

Step 4: Configure Your Template Paths

Open tailwind.config.js and specify the files Tailwind should scan for class names. For example:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,js,ts,jsx,tsx}", // Scan all HTML and JS/TS files
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Tip: The content array is crucial for purging unused CSS in production.

Step 5: Add Tailwind Directives to Your CSS

Create a CSS file (e.g., src/styles/tailwind.css) and add the following:

@tailwind base;
@tailwind components;
@tailwind utilities;

These directives import Tailwind’s base styles, components, and utility classes.

Step 6: Include Tailwind in Your Project

For HTML projects: Include your compiled CSS file in the <head> of your index.html:

<link href="dist/output.css" rel="stylesheet" />

For React/Next.js projects: Import the CSS file in your main entry point, e.g., src/index.js or app/layout.js:

import "./styles/tailwind.css";

Step 7: Build Your Tailwind CSS

You can build Tailwind CSS using the CLI:

npx tailwindcss -i ./src/styles/tailwind.css -o ./dist/output.css --watch

-i → input CSS file
-o → output CSS file
--watch → automatically rebuild on changes

This will generate a ready-to-use CSS file with all your Tailwind utilities.

Step 8: Verify Installation

Create a simple index.html file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind v4 Demo</title>
    <link href="dist/output.css" rel="stylesheet" />
  </head>
  <body class="bg-gray-100 flex items-center justify-center h-screen">
    <h1 class="text-4xl font-bold text-blue-600">
      Tailwind CSS v4 is working!
    </h1>
  </body>
</html>

Open it in a browser. If you see a styled heading, congratulations — Tailwind CSS v4 is successfully installed!

Conclusion

You’ve now installed Tailwind CSS v4 and set up a project ready for development. Tailwind’s utility-first approach will let you rapidly build responsive and customizable designs without writing traditional CSS.

From here, you can explore advanced features like JIT mode, custom themes, and dark mode to make your project truly modern.