Day 1: Utility Classes and Layout | Tailwind CSS in 5 Days

What Utility-First Means

Traditional CSS: you write .card { padding: 16px; background: white; border-radius: 8px; } in a CSS file, then apply class="card". With Tailwind: class="p-4 bg-white rounded-lg". No separate CSS file. No naming classes.

The tradeoff: HTML gets more verbose, but you never context-switch to a CSS file and you never worry about naming. Most developers prefer it after one project.

Terminal (with Vite)

npm create vite@latest my-app -- --template vanilla
cd my-app && npm install
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx,vue,svelte}'],
  theme: { extend: {} },
  plugins: []
}

src/style.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Core Utilities

HTML




Spacing


Heading
Body text


Blue background
Warm box


Sized box

Flexbox and Grid

Flexbox



  Left (grows)
  Right (fixed)




  Title
  Content

Grid



  Main
  Sidebar




  Card

💡

The spacing scale matters. Tailwind's p-4 is 16px, p-6 is 24px, p-8 is 32px. After a day of using it, you internalize the scale and stop thinking in pixels.

📝 Day 1 Exercise

Build a Landing Page Layout

Create an HTML file with Tailwind installed.
Build a sticky navbar with logo on the left and nav links on the right using flexbox.
Build a hero section with a large centered heading, subtext, and two buttons side by side.
Build a 3-column feature card grid. Each card has an icon, heading, and description.
Add a footer with two columns: brand text left, links right.

Day 1 Summary

Utility-first = classes in HTML instead of writing CSS files. Verbose HTML, zero context-switching.
Spacing scale: 1 unit = 4px. p-4=16px, p-6=24px, p-8=32px.
flex items-center justify-between gap-4 — the most common flex pattern.
grid grid-cols-3 gap-6 — three equal columns with 24px gap.

Day 2: Responsive Design

→