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. π