Setup Tailwind CSS v4.0 with Vite + React

This content originally appeared on DEV Community and was authored by Farai Bvuma

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.

This content originally appeared on DEV Community and was authored by Farai Bvuma