1. Why Tailwind?

Tailwind lets you style elements directly in HTML with small, ready-made classes.

CSS:

<h1 class="title">Hello</h1>

.title { color: blue; font-size: 48px; font-weight: bold; }

Tailwind:

<h1 class="text-blue-600 text-5xl font-bold">Hello</h1>

Why developers love it:

• Faster development: no jumping between HTML and CSS files
• No naming: no more inventing names like .card-wrapper-inner-left
• No growing CSS file: your styles live where you use them
• Consistent design: the same spacing and colors everywhere
• Industry standard: it's the default choice in React and Next.js projects

2. Setup

Let's get Tailwind running in 4 steps.

1. Create a Vite project and install Tailwind

npm create vite@latest my-tailwind-app   # Vanilla → JavaScript
cd my-tailwind-app
npm install tailwindcss @tailwindcss/vite

2. Add the plugin in vite.config.js

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({ plugins: [tailwindcss()] })

3. Import Tailwind in src/style.css (delete everything else)