I assume you created a Vite app, perhaps a React app using

npm create vite@latest the-app-name

# or

bun create vite the-app-name

Let’s add Tailwind CSS to style our application.

Install Tailwind CSS and its Vite plugin:

npm install tailwindcss @tailwindcss/vite

#or 

bun add tailwindcss @tailwindcss/vite

Add the @tailwindcss/vite plugin to your Vite configuration in vite.config.ts:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    react(), 
    tailwindcss()
  ],
})

Add this at the top of src/index.css to use the new import syntax:

@import "tailwindcss";

Now Tailwind CSS is ready to use in our project.

You’ll see the layout now is a bit off, that’s a sign Tailwind is configured, because it’s adding some preflight styles:

Lessons in this unit:

0:	Introduction
1:	Box model properties
2:	Colors
3:	Typography
4:	Flexbox and Grid in Tailwind
5:	Modifiers
6:	Responsive design in Tailwind
7:	Apply a style to children with Tailwind
8:	How to fix Unknown at rule @tailwindcss (unknownAtRules) in VS Code
9:	How to align center vertically using Tailwind
10:	How to use custom fonts with Tailwind CSS
11:	▶︎ Setting up Tailwind CSS on Vite - css
12:	Show-hide an element based on existence of a parent class in Tailwind - css
13:	The Tailwind Cheat Sheet
14:	How to setup Tailwind with PurgeCSS and PostCSS
15:	You can’t generate classes dynamically in Tailwind