Home Courses Tailwind CSS Day 1
Day 01 Foundations

Utility Classes and Layout

Tailwind replaces writing CSS files with composing utility classes directly in HTML. This lesson covers setup, the utility-first philosophy, and building layouts with Flexbox and Grid.

~1 hour Hands-on Precision AI Academy

Today’s Objective

Tailwind replaces writing CSS files with composing utility classes directly in HTML. This lesson covers setup, the utility-first philosophy, and building layouts with Flexbox and Grid.

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)
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
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
SRC/STYLE.CSS
@tailwind base;
@tailwind components;
@tailwind utilities;

Core Utilities

HTML
HTML




Spacing




Heading


Body text




Blue background


Warm box




Sized box

Flexbox and Grid

Flexbox
FLEXBOX


 
Left (grows)
 
Right (fixed)






 
Title
 
Content
Grid
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
  1. Create an HTML file with Tailwind installed.
  2. Build a sticky navbar with logo on the left and nav links on the right using flexbox.
  3. Build a hero section with a large centered heading, subtext, and two buttons side by side.
  4. Build a 3-column feature card grid. Each card has an icon, heading, and description.
  5. Add a footer with two columns: brand text left, links right.

Supporting Resources

Go deeper with these references.

Tailwind CSS
Tailwind CSS Documentation Complete class reference, configuration guide, and responsive design docs.
→
Tailwind UI
Tailwind UI Component Library Official component library showing production patterns for common UI elements.
→
GitHub
Awesome Tailwind CSS Community collection of Tailwind plugins, tools, and starter templates.
→

Day 1 Checkpoint

Before moving on, make sure you can answer these without looking:

Continue To Day 2
Responsive Design
→