Responsive Design

Responsive design means your website looks good on all devices - phones, tablets, and desktops. Tailwind makes this easy with breakpoint prefixes.

What You'll Learn

• Mobile-first design philosophy
• Tailwind breakpoint system
• How to use responsive prefixes
• Common responsive patterns
• Testing on different screen sizes

Mobile-First Approach

Tailwind uses a mobile-first strategy:

1. Base classes apply to all screen sizes (including mobile)
2. Breakpoint prefixes override for larger screens

Example

<h1 className="text-2xl md:text-4xl lg:text-6xl">
  Responsive Heading
</h1>

What happens:

• Mobile (< 768px): text-2xl (24px)
• Tablet (≥ 768px): text-4xl (36px)
• Desktop (≥ 1024px): text-6xl (60px)

The text gets progressively larger on bigger screens!

Tailwind Breakpoints

Tailwind has 5 breakpoints:

Prefix	Min Width	Typical Device
(none)	0px	Mobile (default)
sm:	640px	Large mobile
md:	768px	Tablet
lg:	1024px	Small laptop
xl:	1280px	Desktop
2xl:	1536px	Large desktop

Pattern: {breakpoint}:{class}

How Breakpoints Work

Single Property Responsive

<div className="w-full md:w-1/2 lg:w-1/3">
  Responsive width
</div>

Breakdown:

• Mobile: w-full (100% width)
• Tablet (md): w-1/2 (50% width)
• Desktop (lg): w-1/3 (33.3% width)

Multiple Properties Responsive

<div className="
  p-4 md:p-6 lg:p-8
  text-sm md:text-base lg:text-lg
  bg-gray-50 md:bg-white
">
  Multiple responsive properties
</div>

Each property can have its own breakpoint!

Common Responsive Patterns

Pattern 1: Responsive Text Size

From our homepage:

<h1 className="text-4xl md:text-6xl font-bold">
  Every Student Can Achieve Their Full Academic Potential
</h1>

Effect:

• Mobile: Large heading (36px)
• Tablet+: Extra large heading (60px)

Use for: Headings, important text

Pattern 2: Responsive Padding/Spacing

From our container pattern:

<div className="px-4 sm:px-6 lg:px-8">
  Content
</div>

Effect:

• Mobile: 16px horizontal padding
• Small+: 24px horizontal padding
• Large+: 32px horizontal padding

Use for: Containers, cards, sections

Pattern 3: Responsive Grid

From our homepage features:

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
  <div>Feature 1</div>
  <div>Feature 2</div>
  <div>Feature 3</div>
</div>

Effect:

• Mobile: 1 column (stacked)
• Tablet: 2 columns (side-by-side)
• Desktop: 3 columns (all in a row)

Use for: Feature cards, product grids, team members

Pattern 4: Responsive Flex Direction

From our button groups:

<div className="flex flex-col sm:flex-row gap-4">
  <button>Button 1</button>
  <button>Button 2</button>
</div>

Effect:

• Mobile: Stacked vertically (flex-col)
• Small+: Horizontal row (flex-row)

Use for: Button groups, navigation, toolbars

Pattern 5: Show/Hide Elements

From our navigation:

{/* Desktop Navigation */}
<div className="hidden lg:flex items-center space-x-1">
  Desktop menu here
</div>

{/* Mobile Navigation */}
<div className="lg:hidden">
  Mobile menu here
</div>

Effect:

• Mobile: Only mobile menu visible
• Desktop: Only desktop menu visible

Use for: Different layouts for mobile vs desktop

Real Examples from Our Codebase

Homepage Hero Section

<h1 className="text-4xl md:text-6xl font-bold mb-6">
  Every Student Can Achieve Their Full Academic Potential
</h1>
<p className="text-xl md:text-2xl mb-8 max-w-4xl mx-auto">
  A student-powered network of AI-amplified tutors and mentors...
</p>

Why this works:

• Mobile: Smaller text, easier to read on small screens
• Desktop: Larger text, takes advantage of screen space

Mission Overview Grid

<div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
  <div>
    <h3 className="text-2xl font-bold text-gray-900 mb-4">
      AI-Amplified Tutoring
    </h3>
    {/* ... */}
  </div>
  <div>
    <h3 className="text-2xl font-bold text-gray-900 mb-4">
      Student-Powered Network
    </h3>
    {/* ... */}
  </div>
</div>

Why this works:

• Mobile: Content stacks (easier to read on small screens)
• Tablet+: Side-by-side (better use of horizontal space)

Feature Cards

<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
  <div className="text-center p-6 bg-blue-50 rounded-lg">
    {/* Card 1 */}
  </div>
  <div className="text-center p-6 bg-purple-50 rounded-lg">
    {/* Card 2 */}
  </div>
  <div className="text-center p-6 bg-green-50 rounded-lg">
    {/* Card 3 */}
  </div>
</div>

Why this works:

• Mobile: One card per row (full attention)
• Tablet+: Three cards side-by-side (overview at a glance)

Combining Multiple Breakpoints

You can target specific ranges:

<div className="
  text-sm
  sm:text-base
  md:text-lg
  lg:text-xl
  xl:text-2xl
">
  Progressively larger text
</div>

Each breakpoint adds to or overrides previous ones

Testing Responsive Design

In Browser

Chrome DevTools:

1. Press F12 or right-click → Inspect
2. Click device toolbar icon (top-left)
3. Select device preset or drag to resize
4. Test all breakpoints!

Device presets to test:

• iPhone SE (375px) - Small mobile
• iPhone 12/13/14 (390px) - Standard mobile
• iPad (768px) - Tablet
• Laptop (1024px+) - Desktop

Manual Resize

1. Drag browser window to different widths
2. Watch layout adapt at breakpoints
3. Look for issues:
   • Text too small/large?
   • Content overlapping?
   • Layout broken?

Common Responsive Patterns Reference

Responsive Container

<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  {/* Content always centered and padded */}
</div>

Responsive Typography

{/* Heading */}
<h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl">

{/* Body text */}
<p className="text-base md:text-lg">

{/* Small text */}
<span className="text-xs sm:text-sm">

Responsive Spacing

{/* Section padding */}
<section className="py-12 md:py-16 lg:py-24">

{/* Element spacing */}
<div className="mb-6 md:mb-8 lg:mb-12">

{/* Gap in flex/grid */}
<div className="flex gap-4 md:gap-6 lg:gap-8">

Responsive Layout

{/* Flex direction */}
<div className="flex flex-col md:flex-row">

{/* Grid columns */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">

{/* Width */}
<div className="w-full md:w-2/3 lg:w-1/2">

Responsive Visibility

{/* Hide on mobile */}
<div className="hidden md:block">Desktop only</div>

{/* Show only on mobile */}
<div className="md:hidden">Mobile only</div>

{/* Show on tablet only */}
<div className="hidden md:block lg:hidden">Tablet only</div>

Hands-On Exercises

Exercise 1: Make a Heading Responsive

Find a heading in app/page.tsx and make it responsive.

Before:

<h2 className="text-3xl font-bold">Our Mission</h2>

After:

<h2 className="text-2xl md:text-3xl lg:text-4xl font-bold">
  Our Mission
</h2>

Test: Resize browser and watch text grow!

Exercise 2: Create Responsive Grid

Create a component with responsive columns.

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
  <div className="bg-blue-100 p-4 rounded">Item 1</div>
  <div className="bg-green-100 p-4 rounded">Item 2</div>
  <div className="bg-yellow-100 p-4 rounded">Item 3</div>
  <div className="bg-red-100 p-4 rounded">Item 4</div>
</div>

Observe:

• Mobile: 1 column
• Small: 2 columns
• Large: 4 columns

Exercise 3: Responsive Button Group

Make buttons stack on mobile, row on desktop.

<div className="flex flex-col sm:flex-row gap-4">
  <button className="px-6 py-3 bg-blue-600 text-white rounded">
    Primary
  </button>
  <button className="px-6 py-3 border-2 border-blue-600 text-blue-600 rounded">
    Secondary
  </button>
</div>

Exercise 4: Hide/Show Content

Show different content on mobile vs desktop.

{/* Mobile only */}
<div className="md:hidden bg-yellow-100 p-4">
  Mobile menu or content
</div>

{/* Desktop only */}
<div className="hidden md:block bg-blue-100 p-4">
  Desktop content
</div>

Exercise 5: Responsive Padding

Adjust padding based on screen size.

<div className="p-4 sm:p-6 md:p-8 lg:p-12 bg-gray-100 rounded">
  This box has more padding on larger screens
</div>

Best Practices

1. Design Mobile-First

Start with mobile layout, then enhance for larger screens:

{/* ✅ Good: Mobile first */}
<div className="text-sm md:text-base lg:text-lg">

{/* ❌ Bad: Desktop first (harder to maintain) */}
<div className="text-lg md:text-base sm:text-sm">

2. Don't Override Every Breakpoint

Only override when needed:

{/* ✅ Good: Only change when necessary */}
<div className="text-base lg:text-lg">

{/* ❌ Unnecessary: Same value at md and lg */}
<div className="text-base md:text-lg lg:text-lg">

3. Use Consistent Breakpoints

Stick to the same breakpoints across your app:

{/* ✅ Good: Consistent pattern */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
<h1 className="text-3xl md:text-4xl lg:text-5xl">

{/* ❌ Inconsistent: Different breakpoints for similar changes */}
<div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3">
<h1 className="text-3xl lg:text-4xl 2xl:text-5xl">

4. Test on Real Devices

Browser DevTools are good, but test on actual phones/tablets when possible!

Common Mistakes

Mistake 1: Forgetting the Colon

{/* ❌ Wrong: No colon */}
<div className="mdtext-lg">

{/* ✅ Correct */}
<div className="md:text-lg">

Mistake 2: Wrong Order (Doesn't Break, But Harder to Read)

{/* Works, but harder to read */}
<div className="lg:text-xl text-sm md:text-base">

{/* Better: Ascending order */}
<div className="text-sm md:text-base lg:text-xl">

Mistake 3: Mobile-Last Thinking

{/* ❌ Harder to maintain */}
<div className="text-lg sm:text-base">  // Desktop default, smaller on mobile

{/* ✅ Mobile-first is clearer */}
<div className="text-base sm:text-lg">  // Mobile default, larger on desktop

Troubleshooting

Problem: Responsive classes not working

Check:

1. Did you include the colon? md: not md
2. Is the browser wide enough for the breakpoint?
3. Is another class overriding it?

Problem: Layout breaks at certain widths

Solution:

1. Open DevTools device toolbar
2. Drag to the problem width
3. Inspect the element
4. Add appropriate breakpoint classes

Problem: Too many breakpoint overrides

Solution:

• Simplify! You probably don't need all 5 breakpoints
• Most layouts work fine with just md: and maybe lg:

Quick Reference

Breakpoints:

• sm: - 640px+ (large mobile)
• md: - 768px+ (tablet)
• lg: - 1024px+ (desktop)
• xl: - 1280px+ (large desktop)
• 2xl: - 1536px+ (extra large)

Common patterns:

{/* Responsive text */}
<h1 className="text-2xl md:text-4xl lg:text-6xl">

{/* Responsive grid */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">

{/* Responsive flex */}
<div className="flex flex-col md:flex-row">

{/* Responsive spacing */}
<div className="p-4 md:p-6 lg:p-8">

{/* Show/hide */}
<div className="hidden lg:block">Desktop only</div>
<div className="lg:hidden">Mobile only</div>

What's Next

Now that you understand responsive design, let's learn how to customize colors:

Customizing Colors →

---

Quick Links

• ← Tailwind Classes Reference
• Chapter 05 Overview
• Customizing Colors →