Next.js & React

Tailwind CSS

What It Is

A CSS framework that uses utility classes for styling

Analogy

A box of pre-labeled styling stickers — instead of writing custom CSS, you stick on `text-blue-500`

Try It Out

TypeScriptTailwind Example
1400">class=400">class="text-emerald-400">"text-zinc-500 italic">// Traditional CSS
2.card {
3 display: flex;
4 padding: 1rem;
5 background: white;
6 border-radius: 0.5rem;
7 box-shadow: 0 1px 3px rgba(0,0,0,0.1);
8}
9 
10400">class=400">class="text-emerald-400">"text-zinc-500 italic">// Tailwind CSS
11<div className=400">class="text-emerald-400">"flex p-4 bg-white rounded-lg shadow-sm">
12 {400">class=400">class="text-emerald-400">"text-zinc-500 italic">/* Same result, right 400">in the HTML! */}
13</div>

Related Terms in Next.js & React

Framework

A food truck that comes with the kitchen already set up — you just add your recipes

Component

LEGO blocks — each one is self-contained, and you combine them to build something bigger

Props

Instructions given when you delegate a task — "here's what you need to know"

State

The current mood of your restaurant — busy, slow, sold out — and the sign you flip accordingly