Mental Model and Setup

🧑‍🏫 Sabse pehle — simple mein samjho#

Puraane zamane mein hum pehle HTML likhte the, phir usko class name dete the (jaise class="header-card"), aur phir ek alag CSS file mein jaa kar uski styling likhte the. Tailwind ka mental model ekdum ulta hai: Utility-first. Iska matlab hai CSS pehle se chhote-chhote tukdon (utilities) mein bani hui hai. Tumhe bas HTML ke andar wo classes likhni hain (jaise flex bg-blue-500 p-4) aur styling wahi ke wahi apply ho jayegi. Isse context-switching (HTML aur CSS file ke beech bhagna) khatam ho jata hai.

Tailwind v4 ek game changer hai! Isme "Oxide" naam ka naya engine hai jo purane wale se 10x fast hai. Sabse badi baat — ab tumhe tailwind.config.js ki zaroorat nahi padti! Sab kuch seedha tumhari ek CSS file (@theme) se control hota hai.

Traditional CSS vs Utility-First#

The Old Way (BEM / Vanilla CSS)#

You invent custom class names and switch to a separate .css file to define them.

<div class="user-card">
  <img src="user.jpg" class="user-avatar" />
  <h2 class="user-name">Tarun</h2>
</div>

/* In style.css */
.user-card { display: flex; padding: 1rem; background-color: #fff; border-radius: 0.5rem; }
.user-avatar { width: 4rem; height: 4rem; border-radius: 9999px; }
.user-name { font-size: 1.25rem; font-weight: 600; margin-left: 1rem; }

The Tailwind Way (Utility-First)#

You apply pre-existing classes directly within your HTML/JSX. The styling is immediately visible.

<!-- Try changing bg-white to bg-slate-800 and text colors! -->
<div class="max-w-sm mx-auto flex items-center gap-4 p-6 bg-white rounded-2xl shadow-xl border border-gray-100 transform transition duration-300 hover:scale-105">
  <div class="w-16 h-16 bg-gradient-to-br from-cyan-400 to-blue-500 rounded-full shadow-inner flex items-center justify-center text-white text-xl font-bold">
    TR
  </div>
  <div>
    <h2 class="text-xl font-bold text-gray-900 tracking-tight m-0">Tarun Rana</h2>
    <p class="text-sm text-blue-500 font-medium m-0">@tarun_rana</p>
  </div>
  <button class="ml-auto px-4 py-2 bg-gray-900 text-white text-sm font-semibold rounded-full hover:bg-gray-700 transition">
    Follow
  </button>
</div>

What's new in Tailwind v4.3?#

Tailwind v4 brought massive architectural shifts:

1. The Oxide Engine: Written in Rust, making builds incredibly fast.
2. No tailwind.config.js required: Configuration is now handled entirely via standard CSS variables inside your main CSS file.
3. Vite / Modern Bundler Integration: It uses a dedicated Vite plugin that parses your files natively without relying on PostCSS.

Setting up Tailwind v4 (in Vite/React)#

The setup process is now remarkably simpler than v3.

1. Install dependencies

npm install tailwindcss @tailwindcss/vite

2. Update vite.config.ts Import and add the Tailwind plugin.

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

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

3. Add Tailwind to your main CSS file (e.g., index.css) Simply import the Tailwind directive. You no longer need @tailwind base; @tailwind components; @tailwind utilities;.

@import "tailwindcss";

That's it! Your React app is now fully powered by Tailwind v4.3.