Installing Tailwind CSS v4.0 with Vite 🚀

Tailwind CSS: A Utility-First Framework

Tailwind CSS is a utility-first framework packed with classes like flex, pt-4, text-center, and rotate-90, allowing you to build any design directly in your markup.

• It simplifies modern web development, enabling rapid UI creation without leaving your HTML.
• In v4.0, everything is included in a single CSS file (global.css or index.css).
• In this tutorial, we'll implement Dark Mode using Tailwind CSS v4.0.
• We'll use Vite + React for this demo.
• Visit the official documentation for installation via different frameworks, CLI, or CDN.

1. Installation

npm install tailwindcss @tailwindcss/vite

2. Configure the Vite Plugin

Create or update vite.config.js:

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

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

3. Import Tailwind CSS

In your main CSS file (global.css or index.css), add:

@import "tailwindcss";

4. Run the App

That's it! Now, start the development server:

npm run dev

This will launch your app with Tailwind CSS integrated. 🚀