Responsive Design

Tailwind is mobile-first. Start with mobile styles, then add breakpoint prefixes to override for larger screens. This lesson covers the breakpoint system and common responsive patterns.

~1 hour Hands-on Precision AI Academy

Today’s Objective

Tailwind is mobile-first. Start with mobile styles, then add breakpoint prefixes to override for larger screens. This lesson covers the breakpoint system and common responsive patterns.

Add a breakpoint prefix before any utility to apply it at that screen size and above. No breakpoint = applies to all sizes (mobile first).

Breakpoints

BREAKPOINTS

sm: 640px+
md: 768px+
lg: 1024px+
xl: 1280px+
2xl:  1536px+

Mobile-first pattern

MOBILE-FIRST PATTERN



 Main content
 Sidebar



Big Heading


Desktop nav



 Card

Always design mobile first. Start without a prefix. Then add md: or lg: to adjust for larger screens. Adding breakpoints to 'undo' mobile styles is a sign you started desktop-first.

Common Responsive Patterns

Responsive navbar

RESPONSIVE NAVBAR

 Brand   Home About

Card grid

CARD GRID

   Card Title
 Description text here.

📝 Day 2 Exercise Build a Responsive Dashboard

Build a full-page layout: sticky navbar, sidebar that collapses on mobile, main content area.
The sidebar should be hidden on mobile and visible on lg: screens.
Build a stats row: 1 column on mobile, 2 on sm, 4 on lg.
Build a data table that's scrollable horizontally on mobile (overflow-x-auto).
Test by resizing the browser window through all breakpoints.

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 2 Checkpoint

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

What is the core concept introduced in this lesson, and why does it matter?
What problem does Responsive solve that simpler approaches cannot?
Can you trace through the main code example in this lesson and explain each step?
What are the most common mistakes made when first learning this concept?
How would you explain today’s topic to a colleague who has never seen it before?

Continue To Day 3

Components and Reuse

→