DEV Community

Cover image for Installing Tailwind CSS v4.0 with Vite πŸš€
TenE
TenE

Posted on

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
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. πŸš€

Dev Diairies image

User Feedback & The Pivot That Saved The Project

πŸ”₯ Check out Episode 3 of Dev Diairies, following a successful Hackathon project turned startup.

Watch full video πŸŽ₯

Top comments (0)

Scale globally with MongoDB Atlas. Try free.

Scale globally with MongoDB Atlas. Try free.

MongoDB Atlas is the global, multi-cloud database for modern apps trusted by developers and enterprises to build, scale, and run cutting-edge applications, with automated scaling, built-in security, and 125+ cloud regions.

Learn More

πŸ‘‹ Kindness is contagious

Dive into this thoughtful piece, beloved in the supportive DEV Community. Coders of every background are invited to share and elevate our collective know-how.

A sincere "thank you" can brighten someone's dayβ€”leave your appreciation below!

On DEV, sharing knowledge smooths our journey and tightens our community bonds. Enjoyed this? A quick thank you to the author is hugely appreciated.

Okay