Setting Up Tailwind CSS v4

Setting up Tailwind CSS v4 is easier than ever with the new CSS-first configuration approach. Whether you're building a simple HTML site or a complex React application, this guide will walk you through the installation process step by step. By the end of this lesson, you'll have Tailwind running in your project and understand the new v4 setup workflow.

What's New in Tailwind v4 Setup

Before we dive into installation, let's understand what's changed in Tailwind v4:

Key Changes from v3 to v4

CSS-first configuration: No more tailwind.config.js file—configure everything in CSS
Single import: Use @import 'tailwindcss' instead of three separate directives
Faster builds: Built on a new Rust-based engine for lightning-fast compilation
Native CSS features: Better support for modern CSS like container queries and cascade layers
Simplified setup: Fewer configuration files and easier to get started

⚡ Much Simpler!

If you've used Tailwind v3 before, you'll love how much simpler v4 is. If you're new to Tailwind, you picked the perfect time to start!

Prerequisites

Before installing Tailwind CSS v4, make sure you have:

Node.js installed: Version 18 or higher (check with node --version)
Basic terminal knowledge: How to run commands in your terminal
A code editor: VS Code is recommended (it has great Tailwind support)
Basic HTML/CSS knowledge: You should understand HTML tags and CSS selectors

📦 Don't Have Node.js?

Download it from nodejs.org. Choose the LTS (Long Term Support) version.

After installation, verify it works by running node --version and npm --version in your terminal.

Installation Methods

We'll cover three common ways to set up Tailwind CSS v4:

Vite (Recommended for beginners): Fast, modern, and simple
Next.js: For React applications with server-side rendering
PostCSS (Manual setup): For custom build configurations

Let's start with the easiest method: Vite. You can skip to other methods if needed.

Method 1: Setting Up with Vite (Recommended)

Vite is a modern build tool that's incredibly fast and perfect for learning. This is the easiest way to get started with Tailwind v4.

Step 1: Create a New Vite Project

Open your terminal and run:

BASH

# Create a new project
npm create vite@latest my-tailwind-project

# When prompted:
# - Select a framework: Vanilla (or React if you prefer)
# - Select a variant: JavaScript (or TypeScript if you prefer)

This creates a new folder called my-tailwind-project with all the files you need.

Step 2: Navigate to Your Project

BASH

cd my-tailwind-project

Step 3: Install Dependencies

BASH

npm install

Step 4: Install Tailwind CSS v4

Now install Tailwind and its dependencies:

BASH

npm install tailwindcss@next @tailwindcss/vite@next

Note: We're using @next tags because v4 is still in beta at the time of writing. Once v4 is stable, you'll simply use npm install tailwindcss.

Step 5: Configure Vite

Open vite.config.js and add the Tailwind plugin:

vite.config.js

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

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

Step 6: Create Your CSS File

Create a new file called src/style.css (or open it if it exists) and add:

src/style.css

@import "tailwindcss";

That's it! Just one line. This imports all of Tailwind's styles.

✨ Much Simpler Than v3!

In Tailwind v3, you needed three separate directives: @tailwind base, @tailwind components, and @tailwind utilities. Now it's just one import!

Step 7: Import CSS in Your HTML

Open index.html and make sure your CSS is linked:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Tailwind Project</title>
    <link rel="stylesheet" href="/src/style.css" />
  </head>
  <body>
    <h1>Hello Tailwind!</h1>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

Step 8: Start the Development Server

BASH

npm run dev

Your project is now running! Open your browser to the URL shown in the terminal (usually http://localhost:5173).

Step 9: Test Tailwind

Update your HTML to use some Tailwind classes:

index.html

<body class="bg-gray-100 min-h-screen flex items-center justify-center">
  <div class="bg-white rounded-lg shadow-lg p-8 max-w-md">
    <h1 class="text-3xl font-bold text-blue-600 mb-4">
      Hello Tailwind! 🎉
    </h1>
    <p class="text-gray-600 mb-4">
      Tailwind CSS v4 is now running in your project!
    </p>
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded transition">
      Click Me
    </button>
  </div>
</body>

Save the file and check your browser. You should see a beautiful styled card! 🎨

Congratulations! You've successfully set up Tailwind CSS v4 with Vite. You can now start building with Tailwind utilities!

Method 2: Setting Up with Next.js

If you're building a React application with Next.js, here's how to add Tailwind CSS v4:

Step 1: Create a Next.js Project

BASH

npx create-next-app@latest my-nextjs-app

# When prompted:
# - TypeScript? Choose based on preference
# - ESLint? Yes (recommended)
# - Tailwind CSS? Say NO (we'll install v4 manually)
# - App Router? Yes (recommended)
# - Customize import alias? No

Step 2: Navigate and Install Tailwind

BASH

cd my-nextjs-app
npm install tailwindcss@next @tailwindcss/postcss@next

Step 3: Configure PostCSS

Create or update postcss.config.js:

postcss.config.js

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

Step 4: Update Your CSS

Open app/globals.css and replace its contents with:

app/globals.css

@import "tailwindcss";

Step 5: Start Development Server

BASH

npm run dev

Step 6: Test in Your App

Update app/page.tsx (or app/page.jsx):

app/page.tsx

export default function Home() {
  return (
    <main className="min-h-screen bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center p-4">
      <div className="bg-white rounded-2xl shadow-2xl p-8 max-w-md">
        <h1 className="text-4xl font-bold text-gray-800 mb-4">
          Next.js + Tailwind v4 ⚡
        </h1>
        <p className="text-gray-600 mb-6">
          You're now ready to build amazing applications!
        </p>
        <button className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg transition">
          Get Started
        </button>
      </div>
    </main>
  );
}

Visit http://localhost:3000 and you'll see your Tailwind-styled Next.js app!

Method 3: Manual Setup with PostCSS

For custom build configurations or other frameworks, you can set up Tailwind manually:

Step 1: Install Tailwind

BASH

npm install tailwindcss@next @tailwindcss/postcss@next autoprefixer

Step 2: Create PostCSS Config

postcss.config.js

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

Step 3: Create Your CSS File

src/input.css

@import "tailwindcss";

Step 4: Add Build Scripts

Add these scripts to your package.json:

package.json

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

Step 5: Link the Output CSS

HTML

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

Step 6: Start Building

BASH

npm run dev

Customizing Tailwind v4

One of the biggest changes in v4 is how you customize Tailwind. Instead of a JavaScript config file, you use CSS!

Adding Custom Colors

In your CSS file, use the @theme directive:

src/style.css

@import "tailwindcss";

@theme {
  --color-primary: #3b82f6;
  --color-secondary: #8b5cf6;
  --color-accent: #ec4899;
}

/* Now you can use: bg-primary, text-secondary, border-accent, etc. */

Custom Spacing

CSS

@theme {
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
}

/* Use with: p-xs, m-sm, gap-md, etc. */

Custom Fonts

CSS

@theme {
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-serif: 'Merriweather', serif;
  --font-mono: 'Fira Code', monospace;
}

/* Use with: font-sans, font-serif, font-mono */

Custom Breakpoints

CSS

@theme {
  --breakpoint-tablet: 640px;
  --breakpoint-laptop: 1024px;
  --breakpoint-desktop: 1280px;
}

/* Use with: tablet:flex, laptop:grid-cols-3, etc. */

🎨 Much More Intuitive!

CSS-first configuration feels more natural than JavaScript config. Plus, you get autocomplete and type checking in modern editors!

Setting Up Your Editor

Get the best Tailwind development experience with proper editor setup:

VS Code Extensions

Install these extensions for the best experience:

Tailwind CSS IntelliSense: Autocomplete for Tailwind classes
PostCSS Language Support: Syntax highlighting for PostCSS
Prettier - Code formatter: Keep your code clean

Configure Prettier (Optional)

Install the Tailwind Prettier plugin:

BASH

npm install -D prettier prettier-plugin-tailwindcss

Create .prettierrc:

.prettierrc

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

Now Prettier will automatically sort your Tailwind classes in a consistent order!

Building for Production

When you're ready to deploy your site, create a production build:

With Vite

BASH

npm run build

This creates an optimized build in the dist folder, with unused CSS automatically removed.

With Next.js

BASH

npm run build
npm start

With PostCSS

BASH

npm run build

Automatic Optimization: Tailwind v4 automatically removes unused CSS in production, so your final CSS file is tiny (usually 5-15KB)!

Common Setup Issues

Issue: Styles Not Showing Up

Solution: Make sure:

You imported the CSS file in your HTML/JavaScript
Your build tool is running (npm run dev)
You're using the correct Tailwind class names
There are no errors in your terminal

Issue: Build Errors with v4

Solution: Ensure you're using:

Node.js 18 or higher
The correct v4 packages (@next tags if still in beta)
The new @import "tailwindcss" syntax, not old directives

Issue: Autocomplete Not Working

Solution:

Install Tailwind CSS IntelliSense extension in VS Code
Restart VS Code after installation
Make sure your CSS file has @import "tailwindcss"

Issue: Classes Not Being Purged

Solution: In v4, purging is automatic. If you're seeing unused classes:

Make sure you're running a production build
Check that your content paths are correct
Clear your build cache and rebuild

🔍 Still Stuck?

Check the official Tailwind v4 documentation at tailwindcss.com

Or search for your specific error message—the Tailwind community is very helpful!

Why Not Use the CDN?

You might see tutorials mentioning the Tailwind CDN:

HTML

<!-- DON'T use this for real projects! -->
<script src="https://cdn.tailwindcss.com"></script>

Don't use the CDN for production! Here's why:

Huge file size: The CDN includes ALL Tailwind classes (~3MB), making your site slow
No customization: You can't customize colors, spacing, or other settings
No build-time features: Missing optimizations and modern features
Bad performance: Your users will experience slow page loads

Use the CDN only for: Quick demos, CodePen experiments, or learning Tailwind for the first time.

Next Steps After Setup

Congratulations on setting up Tailwind CSS v4! Here's what to do next:

Explore the utilities: Try different Tailwind classes in your HTML
Build something simple: Create a card, button, or navbar
Check the cheat sheet: Keep a Tailwind cheat sheet handy for reference
Continue this tutorial: The next lesson covers the utility-first approach in depth

Verify Your Installation

If this playground works, your Tailwind setup is perfect!

Test Your Setup!

Key Takeaways

Tailwind v4 uses CSS-first configuration with @theme instead of JavaScript config
You import Tailwind with @import "tailwindcss" instead of three separate directives
Vite is the easiest way to get started with Tailwind v4
Next.js and other frameworks work great with Tailwind v4 via PostCSS
VS Code with Tailwind IntelliSense extension provides the best development experience
Production builds automatically remove unused CSS, keeping your bundle tiny
Never use the CDN for production—always use a proper build setup
Customization is done in CSS using CSS variables, making it more intuitive

What's Next?

Now that you have Tailwind CSS v4 installed and running, you're ready to learn how to actually use it!

In the next lesson, we'll dive deep into the utility-first approach—the core philosophy of Tailwind CSS. You'll learn how to think in utilities and build beautiful designs by composing classes.

💪 Keep Your Setup Running!

Make sure your development server is running as you continue through the tutorials. You'll want to try out each concept we cover in your own project!

Test Your Understanding

Question 1 of 3Score: 0/0

What is the main configuration approach in Tailwind CSS v4?

What's New in Tailwind v4 Setup

Before we dive into installation, let's understand what's changed in Tailwind v4:

Key Changes from v3 to v4

CSS-first configuration: No more tailwind.config.js file—configure everything in CSS
Single import: Use @import 'tailwindcss' instead of three separate directives
Faster builds: Built on a new Rust-based engine for lightning-fast compilation
Native CSS features: Better support for modern CSS like container queries and cascade layers
Simplified setup: Fewer configuration files and easier to get started

⚡ Much Simpler!

If you've used Tailwind v3 before, you'll love how much simpler v4 is. If you're new to Tailwind, you picked the perfect time to start!

Prerequisites

Before installing Tailwind CSS v4, make sure you have:

Node.js installed: Version 18 or higher (check with node --version)
Basic terminal knowledge: How to run commands in your terminal
A code editor: VS Code is recommended (it has great Tailwind support)
Basic HTML/CSS knowledge: You should understand HTML tags and CSS selectors

📦 Don't Have Node.js?

Download it from nodejs.org. Choose the LTS (Long Term Support) version.

After installation, verify it works by running node --version and npm --version in your terminal.

Installation Methods

We'll cover three common ways to set up Tailwind CSS v4:

Vite (Recommended for beginners): Fast, modern, and simple
Next.js: For React applications with server-side rendering
PostCSS (Manual setup): For custom build configurations

Let's start with the easiest method: Vite. You can skip to other methods if needed.

Method 1: Setting Up with Vite (Recommended)

Vite is a modern build tool that's incredibly fast and perfect for learning. This is the easiest way to get started with Tailwind v4.

Step 1: Create a New Vite Project

Open your terminal and run:

BASH

# Create a new project
npm create vite@latest my-tailwind-project

# When prompted:
# - Select a framework: Vanilla (or React if you prefer)
# - Select a variant: JavaScript (or TypeScript if you prefer)

This creates a new folder called my-tailwind-project with all the files you need.

Step 2: Navigate to Your Project

BASH

cd my-tailwind-project

Step 3: Install Dependencies

BASH

npm install

Step 4: Install Tailwind CSS v4

Now install Tailwind and its dependencies:

BASH

npm install tailwindcss@next @tailwindcss/vite@next

Note: We're using @next tags because v4 is still in beta at the time of writing. Once v4 is stable, you'll simply use npm install tailwindcss.

Step 5: Configure Vite

Open vite.config.js and add the Tailwind plugin:

vite.config.js

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

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

Step 6: Create Your CSS File

Create a new file called src/style.css (or open it if it exists) and add:

src/style.css

@import "tailwindcss";

That's it! Just one line. This imports all of Tailwind's styles.

✨ Much Simpler Than v3!

In Tailwind v3, you needed three separate directives: @tailwind base, @tailwind components, and @tailwind utilities. Now it's just one import!

Step 7: Import CSS in Your HTML

Open index.html and make sure your CSS is linked:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Tailwind Project</title>
    <link rel="stylesheet" href="/src/style.css" />
  </head>
  <body>
    <h1>Hello Tailwind!</h1>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

Step 8: Start the Development Server

BASH

npm run dev

Your project is now running! Open your browser to the URL shown in the terminal (usually http://localhost:5173).

Step 9: Test Tailwind

Update your HTML to use some Tailwind classes:

index.html

<body class="bg-gray-100 min-h-screen flex items-center justify-center">
  <div class="bg-white rounded-lg shadow-lg p-8 max-w-md">
    <h1 class="text-3xl font-bold text-blue-600 mb-4">
      Hello Tailwind! 🎉
    </h1>
    <p class="text-gray-600 mb-4">
      Tailwind CSS v4 is now running in your project!
    </p>
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded transition">
      Click Me
    </button>
  </div>
</body>

Save the file and check your browser. You should see a beautiful styled card! 🎨

Congratulations! You've successfully set up Tailwind CSS v4 with Vite. You can now start building with Tailwind utilities!

Method 2: Setting Up with Next.js

If you're building a React application with Next.js, here's how to add Tailwind CSS v4:

Step 1: Create a Next.js Project

BASH

npx create-next-app@latest my-nextjs-app

# When prompted:
# - TypeScript? Choose based on preference
# - ESLint? Yes (recommended)
# - Tailwind CSS? Say NO (we'll install v4 manually)
# - App Router? Yes (recommended)
# - Customize import alias? No

Step 2: Navigate and Install Tailwind

BASH

cd my-nextjs-app
npm install tailwindcss@next @tailwindcss/postcss@next

Step 3: Configure PostCSS

Create or update postcss.config.js:

postcss.config.js

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

Step 4: Update Your CSS

Open app/globals.css and replace its contents with:

app/globals.css

@import "tailwindcss";

Step 5: Start Development Server

BASH

npm run dev

Step 6: Test in Your App

Update app/page.tsx (or app/page.jsx):

app/page.tsx

export default function Home() {
  return (
    <main className="min-h-screen bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center p-4">
      <div className="bg-white rounded-2xl shadow-2xl p-8 max-w-md">
        <h1 className="text-4xl font-bold text-gray-800 mb-4">
          Next.js + Tailwind v4 ⚡
        </h1>
        <p className="text-gray-600 mb-6">
          You're now ready to build amazing applications!
        </p>
        <button className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg transition">
          Get Started
        </button>
      </div>
    </main>
  );
}

Visit http://localhost:3000 and you'll see your Tailwind-styled Next.js app!

Method 3: Manual Setup with PostCSS

For custom build configurations or other frameworks, you can set up Tailwind manually:

Step 1: Install Tailwind

BASH

npm install tailwindcss@next @tailwindcss/postcss@next autoprefixer

Step 2: Create PostCSS Config

postcss.config.js

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

Step 3: Create Your CSS File

src/input.css

@import "tailwindcss";

Step 4: Add Build Scripts

Add these scripts to your package.json:

package.json

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

Step 5: Link the Output CSS

HTML

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

Step 6: Start Building

BASH

npm run dev

Customizing Tailwind v4

One of the biggest changes in v4 is how you customize Tailwind. Instead of a JavaScript config file, you use CSS!

Adding Custom Colors

In your CSS file, use the @theme directive:

src/style.css

@import "tailwindcss";

@theme {
  --color-primary: #3b82f6;
  --color-secondary: #8b5cf6;
  --color-accent: #ec4899;
}

/* Now you can use: bg-primary, text-secondary, border-accent, etc. */

Custom Spacing

CSS

@theme {
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
}

/* Use with: p-xs, m-sm, gap-md, etc. */

Custom Fonts

CSS

@theme {
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-serif: 'Merriweather', serif;
  --font-mono: 'Fira Code', monospace;
}

/* Use with: font-sans, font-serif, font-mono */

Custom Breakpoints

CSS

@theme {
  --breakpoint-tablet: 640px;
  --breakpoint-laptop: 1024px;
  --breakpoint-desktop: 1280px;
}

/* Use with: tablet:flex, laptop:grid-cols-3, etc. */

🎨 Much More Intuitive!

CSS-first configuration feels more natural than JavaScript config. Plus, you get autocomplete and type checking in modern editors!

Setting Up Your Editor

Get the best Tailwind development experience with proper editor setup:

VS Code Extensions

Install these extensions for the best experience:

Tailwind CSS IntelliSense: Autocomplete for Tailwind classes
PostCSS Language Support: Syntax highlighting for PostCSS
Prettier - Code formatter: Keep your code clean

Configure Prettier (Optional)

Install the Tailwind Prettier plugin:

BASH

npm install -D prettier prettier-plugin-tailwindcss

Create .prettierrc:

.prettierrc

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

Now Prettier will automatically sort your Tailwind classes in a consistent order!

Building for Production

When you're ready to deploy your site, create a production build:

With Vite

BASH

npm run build

This creates an optimized build in the dist folder, with unused CSS automatically removed.

With Next.js

BASH

npm run build
npm start

With PostCSS

BASH

npm run build

Automatic Optimization: Tailwind v4 automatically removes unused CSS in production, so your final CSS file is tiny (usually 5-15KB)!

Common Setup Issues

Issue: Styles Not Showing Up

Solution: Make sure:

You imported the CSS file in your HTML/JavaScript
Your build tool is running (npm run dev)
You're using the correct Tailwind class names
There are no errors in your terminal

Issue: Build Errors with v4

Solution: Ensure you're using:

Node.js 18 or higher
The correct v4 packages (@next tags if still in beta)
The new @import "tailwindcss" syntax, not old directives

Issue: Autocomplete Not Working

Solution:

Install Tailwind CSS IntelliSense extension in VS Code
Restart VS Code after installation
Make sure your CSS file has @import "tailwindcss"

Issue: Classes Not Being Purged

Solution: In v4, purging is automatic. If you're seeing unused classes:

Make sure you're running a production build
Check that your content paths are correct
Clear your build cache and rebuild

🔍 Still Stuck?

Check the official Tailwind v4 documentation at tailwindcss.com

Or search for your specific error message—the Tailwind community is very helpful!

Why Not Use the CDN?

You might see tutorials mentioning the Tailwind CDN:

HTML

<!-- DON'T use this for real projects! -->
<script src="https://cdn.tailwindcss.com"></script>

Don't use the CDN for production! Here's why:

Huge file size: The CDN includes ALL Tailwind classes (~3MB), making your site slow
No customization: You can't customize colors, spacing, or other settings
No build-time features: Missing optimizations and modern features
Bad performance: Your users will experience slow page loads

Use the CDN only for: Quick demos, CodePen experiments, or learning Tailwind for the first time.

Next Steps After Setup

Congratulations on setting up Tailwind CSS v4! Here's what to do next:

Explore the utilities: Try different Tailwind classes in your HTML
Build something simple: Create a card, button, or navbar
Check the cheat sheet: Keep a Tailwind cheat sheet handy for reference
Continue this tutorial: The next lesson covers the utility-first approach in depth

Verify Your Installation

If this playground works, your Tailwind setup is perfect!

Test Your Setup!

Key Takeaways

Tailwind v4 uses CSS-first configuration with @theme instead of JavaScript config
You import Tailwind with @import "tailwindcss" instead of three separate directives
Vite is the easiest way to get started with Tailwind v4
Next.js and other frameworks work great with Tailwind v4 via PostCSS
VS Code with Tailwind IntelliSense extension provides the best development experience
Production builds automatically remove unused CSS, keeping your bundle tiny
Never use the CDN for production—always use a proper build setup
Customization is done in CSS using CSS variables, making it more intuitive

What's Next?

Now that you have Tailwind CSS v4 installed and running, you're ready to learn how to actually use it!

In the next lesson, we'll dive deep into the utility-first approach—the core philosophy of Tailwind CSS. You'll learn how to think in utilities and build beautiful designs by composing classes.

💪 Keep Your Setup Running!

Make sure your development server is running as you continue through the tutorials. You'll want to try out each concept we cover in your own project!

Test Your Understanding

Question 1 of 3Score: 0/0

What's New in Tailwind v4 Setup

Key Changes from v3 to v4

Prerequisites

Installation Methods

Method 1: Setting Up with Vite (Recommended)

Step 1: Create a New Vite Project

Step 2: Navigate to Your Project

Step 3: Install Dependencies

Step 4: Install Tailwind CSS v4

Step 5: Configure Vite

Step 6: Create Your CSS File

Step 7: Import CSS in Your HTML

Step 8: Start the Development Server

Step 9: Test Tailwind

Method 2: Setting Up with Next.js

Step 1: Create a Next.js Project

Step 2: Navigate and Install Tailwind

Step 3: Configure PostCSS

Step 4: Update Your CSS

Step 5: Start Development Server

Step 6: Test in Your App

Method 3: Manual Setup with PostCSS

Step 1: Install Tailwind

Step 2: Create PostCSS Config

Step 3: Create Your CSS File

Step 4: Add Build Scripts

Step 5: Link the Output CSS

Step 6: Start Building

Customizing Tailwind v4

Adding Custom Colors

Custom Spacing

Custom Fonts

Custom Breakpoints

Setting Up Your Editor

VS Code Extensions

Configure Prettier (Optional)

Building for Production

With Vite

With Next.js

With PostCSS

Common Setup Issues

Issue: Styles Not Showing Up

Issue: Build Errors with v4

Issue: Autocomplete Not Working

Issue: Classes Not Being Purged

Why Not Use the CDN?

Next Steps After Setup

Verify Your Installation

Key Takeaways

What's Next?

Test Your Understanding

What is the main configuration approach in Tailwind CSS v4?

Just set up Tailwind CSS v4! This guide made it super easy.

Get Every Tailwind CSS Tutorial

You might also like

UI Components

Developer Tools

HTML Game

Join Our Web Development Training Program

Join Our Social Communities

TailwindCSS Tutorials

Setting Up Tailwind CSS v4

What's New in Tailwind v4 Setup

Key Changes from v3 to v4

Prerequisites

Installation Methods

Method 1: Setting Up with Vite (Recommended)

Step 1: Create a New Vite Project

Step 2: Navigate to Your Project

Step 3: Install Dependencies

Step 4: Install Tailwind CSS v4

Step 5: Configure Vite

Step 6: Create Your CSS File

Step 7: Import CSS in Your HTML

Step 8: Start the Development Server

Step 9: Test Tailwind

Method 2: Setting Up with Next.js

Step 1: Create a Next.js Project

Step 2: Navigate and Install Tailwind