Tailwind CSS

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 → JavaScriptcd my-tailwind-appnpm 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)

@import "tailwindcss";

4. Run it

npm run dev

• 💡 Install the Tailwind CSS IntelliSense extension in VS Code to get autocomplete

3. The Pattern

Learn this once, and you can read any Tailwind class.

{property}-{value}

📏 Numbers = × 4px

p-4 = 16px · w-64 = 256px

👕 Sizes = t-shirt sizes

sm → md → lg → xl

4. Colors

One color system for text, backgrounds, and borders.

{text | bg | border}-{color}-{shade}

<p class="text-red-500">Red text</p><div class="bg-slate-900">Dark box</div>

5. Typography

Make your text readable and give it a clear hierarchy.

<h1 class="text-5xl font-bold text-center">Title</h1>

6. Make It Yours

Define your project's colors and fonts once, then use them everywhere.

In style.css:

@import "tailwindcss";
@theme {  --color-midnight: #0B1026;  /* background */  --color-snow: #F8FAFC;      /* text */  --color-amber: #FBBF24;     /* accent */
  --font-poppins: "Poppins", sans-serif;  --font-inter: "Inter", sans-serif;}

Use them like any other class:

<body class="bg-midnight text-snow font-inter">  <h1 class="font-poppins text-amber">Hello</h1>  <button class="bg-amber text-midnight">Click me</button></body>

• 💡 Set colors and fonts once on <body>, and everything inside inherits them
• 💡 Think of a night event: dark sky, white text, and amber light that draws you in
• 💡 Change a hex value once, and the whole site updates
• ⚠️ Load the fonts from Google Fonts first

7. Box Model

Give your elements room to breathe.

{p | m}{side}-{size}

Sizes: 0, 1, 2, 4, 6, 8, 12, 16, auto → 📏 1 = 4px

<div class="p-4 mt-8">Padding 16px, margin top 32px</div>

Border

<div class="border border-white/10 rounded-2xl">Subtle card</div><footer class="border-t border-white/10">Line on top only</footer>

• 💡 Always add border first. A color alone shows nothing

Corners and shadow

• 💡 Tailwind already uses border-box for every element

8. Sizing

Control how wide and tall elements are.

• 📏 w-64 = 64 × 4 = 256px
• Fractions are percentages: w-1/2 = 50%

Max width sizes (👕 t-shirt sizes, not × 4):

Centered page container (you'll use this on every site):

<div class="max-w-4xl mx-auto">...</div>

9. Flexbox

Place elements side by side, stack them, or center them.

<div class="flex justify-between items-center gap-4">...</div>

Center anything:

<div class="flex justify-center items-center h-screen">...</div>

10. States

Make your page react to the user.

<button class="bg-amber hover:bg-snow text-midnight transition">Hover me</button>

• 💡 Add transition to make the change smooth

11. Responsive

Make one design work on every screen.

Tailwind is mobile-first: a class with no prefix applies to all screens, and a class with a prefix applies from that size and up.

<div class="flex flex-col md:flex-row">Stacked on mobile, row on tablet+</div><nav class="hidden md:flex">Hidden on mobile, visible on tablet+</nav>

1. Design for mobile first
2. Add md: and lg: for bigger screens

📌 Tailwind 80/20 Cheatsheet

The classes you'll use most, all in one place.