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.