Setup Tailwind CSS v4.0 with Vite + React

Introduction

I recently ran into some trouble trying to setup Tailwind CSS v4.0 with a new Vite + React project. If you are stuck trying to figure out how to proceed, here is a quick step-by-step guide to help you.

Configuration

In the project directory, run the following command to install tailwind.

npm install tailwindcss @tailwindcss/vite 

Update your vite.config.ts file, importing tailwind and adding it as a plugin.

import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; import tailwindcss from "@tailwindcss/vite"; export default defineConfig({ plugins: [react(), tailwindcss()], }); 

Add the tailwind import to your global css file, in my case it was my src/index.css.

@import "tailwindcss"; 

Now go ahead and test your setup, this can be done in the App.tsx.

 <div className="text-3xl font-bold underline bg-red-700"> Hello World! </div> 

Conclusion

I hope this guide will help you with your setup, feel free to reach out if you have any questions.