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 develop…


This content originally appeared on DEV Community and was authored by TenE

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


This content originally appeared on DEV Community and was authored by TenE


Print Share Comment Cite Upload Translate Updates
APA

TenE | Sciencx (2025-07-15T18:30:00+00:00) Installing Tailwind CSS v4.0 with Vite 🚀. Retrieved from https://www.scien.cx/2025/07/15/installing-tailwind-css-v4-0-with-vite-%f0%9f%9a%80/

MLA
" » Installing Tailwind CSS v4.0 with Vite 🚀." TenE | Sciencx - Tuesday July 15, 2025, https://www.scien.cx/2025/07/15/installing-tailwind-css-v4-0-with-vite-%f0%9f%9a%80/
HARVARD
TenE | Sciencx Tuesday July 15, 2025 » Installing Tailwind CSS v4.0 with Vite 🚀., viewed ,<https://www.scien.cx/2025/07/15/installing-tailwind-css-v4-0-with-vite-%f0%9f%9a%80/>
VANCOUVER
TenE | Sciencx - » Installing Tailwind CSS v4.0 with Vite 🚀. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2025/07/15/installing-tailwind-css-v4-0-with-vite-%f0%9f%9a%80/
CHICAGO
" » Installing Tailwind CSS v4.0 with Vite 🚀." TenE | Sciencx - Accessed . https://www.scien.cx/2025/07/15/installing-tailwind-css-v4-0-with-vite-%f0%9f%9a%80/
IEEE
" » Installing Tailwind CSS v4.0 with Vite 🚀." TenE | Sciencx [Online]. Available: https://www.scien.cx/2025/07/15/installing-tailwind-css-v4-0-with-vite-%f0%9f%9a%80/. [Accessed: ]
rf:citation
» Installing Tailwind CSS v4.0 with Vite 🚀 | TenE | Sciencx | https://www.scien.cx/2025/07/15/installing-tailwind-css-v4-0-with-vite-%f0%9f%9a%80/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts