DEV Community

TenE Organization profile image TenE
TenE for TenE Organization

Posted on • Originally published at dev.to

Installing Tailwind CSS v4.0 with Vite 🚀

#tailwindcss #vite #webdev #css

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
Enter fullscreen mode Exit fullscreen mode

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()],
})
Enter fullscreen mode Exit fullscreen mode

3. Import Tailwind CSS

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

@import "tailwindcss";
Enter fullscreen mode Exit fullscreen mode

4. Run the App

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

npm run dev
Enter fullscreen mode Exit fullscreen mode

This will launch your app with Tailwind CSS integrated. 🚀

Top comments (2)

Collapse
 
shital_borle profile image
Shital Borle •

If we follow above steps for CMS like Drupal, tailwindcss V4 classes are not getting applied on the page. Can anyone help on this?

Collapse
 
parag_nandy_roy profile image
Parag Nandy Roy •

Tailwind 4 + Vite = 🔥