Installing Tailwind CSS v4.0 with Vite and React: A Comprehensive Guide

Tailwind CSS has become one of the most popular utility-first CSS frameworks, enabling developers to build modern, responsive, and highly customizable user interfaces with ease. With the release of Tailwind CSS v4.0, the framework has introduced several new features and improvements, making it even more powerful and efficient. If you're working with Vite and React, integrating Tailwind CSS v4.0 into your project is straightforward. In this article, we'll walk you through the entire process step by step.

Prerequisites

Before we dive into the installation process, ensure that you have the following tools installed on your machine:

Node.js: Tailwind CSS and Vite require Node.js. You can download and install it from nodejs.org.
npm or Yarn: These are package managers that will help you install the necessary dependencies. npm comes bundled with Node.js, but you can also install Yarn if you prefer.

Step 1: Setting Up a New Vite + React Project

First, let's create a new Vite project with React. Open your terminal and run the following command:

npm create vite@latest my-tailwind-app --template react

This command will create a new directory called my-tailwind-app with a basic React template. Navigate into the project directory:

cd my-tailwind-app

Next, install the project dependencies:

npm install

Step 2: Installing Tailwind CSS v4.0

Now that your Vite + React project is set up, it's time to install Tailwind CSS 4.0. Run the following command to install Tailwind CSS and its dependencies:

npm install tailwindcss @tailwindcss/vite

Step 3: Configuring the Vite Plugin

Add the Tailwind CSS Vite plugin to your Vite configuration. Open the vite.config.ts file and add the following:

// vite.config.ts
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

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

This will configure Vite to use the Tailwind CSS plugin.

Step 4: Importing Tailwind CSS

Now, create a CSS file (e.g., src/index.css) and import Tailwind CSS using the @import directive:

/* src/index.css */
@import "tailwindcss";

This imports Tailwind’s base styles, components, and utilities into your project.

Step 5: Starting Your Build Process

Run the build process with the following command:

npm run dev

This will start the Vite development server, and your application should now be running.

Step 6: Adding Tailwind CSS to Your Project

Make sure your compiled CSS is included in the <head> of your HTML file (this should be handled automatically by Vite). Then, start using Tailwind's utility classes to style your content.

For example, in your index.html, you can link the generated CSS file:

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/dist/styles.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

Step 7: Using Tailwind CSS in Your React Components

With Tailwind CSS integrated, you can now use its utility classes in your React components. For example, modify src/App.jsx like so:

// src/App.jsx
function App() {
  return (
    <div className="bg-gray-100 min-h-screen flex items-center justify-center">
      <h1 className="text-4xl font-bold text-blue-600">
        Hello, Tailwind CSS 4!
      </h1>
    </div>
  );
}

export default App;

This uses Tailwind’s utility classes to style the div and h1 elements, giving you full control over the layout and appearance.

Step 8: Building for Production

When you're ready to deploy your application, you can build it for production. Run the following command:

npm run build

This will generate an optimized production build in the dist directory. Tailwind CSS will purge any unused styles, making the final CSS bundle as small as possible.

Conclusion

Congratulations! You've successfully installed and configured Tailwind CSS 4 in a Vite + React project. Tailwind CSS's utility-first approach allows you to rapidly build modern, responsive user interfaces without writing custom CSS. With the new features and improvements in Tailwind CSS 4, you can take your projects to the next level.

As you continue to work with Tailwind CSS, explore its extensive documentation and customization options to make the most of this powerful framework. Happy coding!