Tailwind setup and basics

Install Tailwind and learn its core utility classes.

📖 Key ideas

Install with Vite: npm install tailwindcss @tailwindcss/vite, then @import "tailwindcss";.
Spacing: p-4 (padding), m-2 (margin), gap-6.
Text: text-xl, font-bold, text-gray-700.
Colours: bg-emerald-600, text-white.
Tailwind only outputs classes you actually use.

💡 Real-life example: Tailwind is a spice rack: a pinch of p-4, a dash of text-lg, and the dish is ready.

p-4Padding of 1rem

text-xlExtra-large text size

bg-blue-600Blue background shade 600

PurgingRemoving unused classes from output