Mobile-first philosophy in Tailwind

Introduction

Mobile-first means designing websites starting with small screens first. This helps make sure the site works well on phones before adding styles for bigger screens.

When building a website that should look good on phones and tablets.

When you want your site to load fast on mobile devices.

When you want to make sure important content is easy to see on small screens.

When you want to add extra styles only for bigger screens like laptops or desktops.

Syntax

Tailwind

/* Tailwind uses small screen styles by default.
Use prefixes like 'md:', 'lg:' to add styles for bigger screens. */

<div class="p-4 bg-blue-500 md:bg-green-500 lg:bg-red-500">
  Content here
</div>

Tailwind applies styles without prefixes to all screen sizes starting from mobile.

Use prefixes like md: or lg: to change styles on medium or large screens.

Examples

This example shows text size starting small on phones, then bigger on tablets and up.

Tailwind

<div class="text-sm md:text-lg">
  Text size changes from small on mobile to large on medium screens.
</div>

Button is blue on mobile, changes to green on medium screens, and darkens on hover.

Tailwind

<button class="bg-blue-500 hover:bg-blue-700 md:bg-green-500">
  Click me
</button>

Padding is smallest on mobile, bigger on medium screens, and largest on large screens.

Tailwind

<div class="p-2 md:p-6 lg:p-10">
  Padding grows as screen size increases.
</div>

Sample Program

This page shows a colored box that changes color and text size as the screen gets bigger. On a phone, the box is blue with smaller text. On a tablet, it turns green with medium text. On a desktop, it becomes red with larger text.

Tailwind

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Mobile-first Tailwind Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
  <main class="max-w-md mx-auto p-4">
    <h1 class="text-xl font-bold text-center mb-4">Mobile-first Design</h1>
    <div class="bg-blue-400 text-white p-4 rounded md:bg-green-500 lg:bg-red-600">
      <p class="text-base md:text-lg lg:text-xl">
        This box is blue on small screens, green on medium, and red on large screens.
      </p>
    </div>
  </main>
</body>
</html>

Important Notes

Always include the viewport meta tag for proper mobile scaling.

Start styling without prefixes for mobile, then add prefixes for bigger screens.

Test your design by resizing the browser or using device simulation in browser DevTools.

Summary

Mobile-first means design for small screens first, then add styles for bigger screens.

Tailwind applies styles mobile-first by default, using prefixes like md: for bigger screens.

This approach helps make websites fast and easy to use on phones.

Practice

1. What does the mobile-first philosophy mean in web design?

easy

A. Designing for small screens first, then adding styles for larger screens

B. Designing only for desktop screens

C. Designing for large screens first, then adjusting for smaller screens

D. Ignoring screen sizes and using fixed layouts

Solution

1. Step 1: Understand mobile-first philosophy

   Mobile-first means starting design with small screens like phones, then adding styles for bigger screens.

2. Step 2: Compare options

   Only Designing for small screens first, then adding styles for larger screens correctly describes this approach; others describe desktop-first or fixed layouts.

3. Final Answer:

   Designing for small screens first, then adding styles for larger screens -> Option A

4. Quick Check:

   Mobile-first = Start small screens first [OK]

Hint: Mobile-first means start small, then grow bigger [OK]

Common Mistakes:

• Thinking mobile-first means designing desktop first
• Confusing mobile-first with ignoring screen sizes
• Believing mobile-first means only designing for phones

2. Which Tailwind CSS class applies styles only on medium and larger screens?

easy

A. md:bg-blue-500

B. bg-blue-500

C. sm:bg-blue-500

D. lg:bg-blue-500

Solution

1. Step 1: Understand Tailwind screen prefixes

   In Tailwind, md: applies styles at medium screen size and above.

2. Step 2: Identify correct prefix for medium screens

   md:bg-blue-500 uses md:, so it applies on medium and larger screens. Others apply on small, large, or all screens.

3. Final Answer:

   md:bg-blue-500 -> Option A

4. Quick Check:

   md: means medium screens and up [OK]

Hint: Remember md: prefix targets medium+ screens [OK]

Common Mistakes:

• Confusing sm: with md:
• Using no prefix and expecting medium-only styles
• Mixing lg: with md:

3. Given this Tailwind code:

<div class="bg-red-500 md:bg-green-500">Box</div>

What background color will the box have on a small screen?

medium

A. Green

B. Red

C. No color

D. Blue

Solution

1. Step 1: Analyze classes on small screen

   The class bg-red-500 applies to all screens by default. The md:bg-green-500 applies only on medium and larger screens.

2. Step 2: Determine active class on small screen

   On small screens, md:bg-green-500 is ignored, so background stays red.

3. Final Answer:

   Red -> Option B

4. Quick Check:

   Default class applies on small screens [OK]

Hint: Default classes apply on all screens unless overridden [OK]

Common Mistakes:

• Thinking md: classes apply on small screens
• Ignoring default classes
• Assuming no color if md: class exists

4. What is wrong with this Tailwind code if the goal is to make text blue on small screens and red on medium and larger screens?

<p class="md:text-red-500 text-blue-500">Hello</p>

medium

A. The order of classes is reversed; it should be text-blue-500 md:text-red-500

B. The md: prefix should be on text-blue-500

C. No error; it works as intended

D. Tailwind does not support multiple text color classes

Solution

1. Step 1: Understand class application order

   Tailwind applies base classes first, then overrides with media prefixes like md:.

2. Step 2: Check if code matches goal

   text-blue-500 applies on all screens, overridden by md:text-red-500 on medium+ screens, matching the goal.

3. Final Answer:

   No error; it works as intended -> Option C

4. Quick Check:

   Base then md: override works [OK]

Hint: Base class first, then md: override for bigger screens [OK]

Common Mistakes:

• Thinking order of classes matters in Tailwind
• Believing md: prefix must be on base class
• Assuming Tailwind can't override colors

5. You want a button that is full width on small screens but only 200px wide on medium and larger screens using Tailwind. Which class combination achieves this?

hard

A. w-full w-[200px] md:w-full

B. md:w-full w-[200px]

C. w-[200px] md:w-full

D. w-full md:w-[200px]

Solution

1. Step 1: Understand mobile-first width classes

   Use w-full for full width on small screens (default). Use md:w-[200px] to set width 200px on medium+ screens.

2. Step 2: Check options for correct order and values

   w-full md:w-[200px] sets full width by default, then overrides to 200px on medium screens. Others reverse or duplicate incorrectly.

3. Final Answer:

   w-full md:w-[200px] -> Option D

4. Quick Check:

   Default full width, md override 200px [OK]

Hint: Default small screen first, then md: for bigger screens [OK]

Common Mistakes:

• Reversing order of width classes
• Using md: on full width instead of fixed width
• Duplicating conflicting width classes