DEV Community

Cover image for Setup Tailwind CSS v4.0 with Vite + React
Farai Bvuma
Farai Bvuma

Posted on

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.

Top comments (0)