Day 3: Tailwind CSS Fundamentals
Learn the utility-first CSS framework for building fully custom, responsive interfaces — no pre-made components, just pure control.
Today's Lessons
1 Introduction
What is Tailwind CSS? Why use it? How does it compare to Bootstrap?
2 Setup
Adding Tailwind via Play CDN for learning, or CLI for production.
3 Typography
Font sizes, weights, alignment, colors, line-height, and letter-spacing.
4 Buttons
Solid, outlined, disabled, grouped, and icon buttons — all from scratch.
5 Containers & Spacing
container, max-w-*, mx-auto, padding, margin, and the spacing scale.
6 Grid Layout
CSS Grid, column spans, responsive columns, gaps, and flexbox basics.
7 Images
Responsive images, object-fit, alignment, rounded corners, and overlays.
8 Utility Classes
Text colors, backgrounds, display, borders, and box shadows.
9 Components
Navbars, alerts, buttons, badges, cards, modals, and forms — built from scratch.