Mobile-first philosophy in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

Understanding Tailwind's Mobile-First Breakpoints

Which Tailwind CSS class applies styles only on screens wider than 768px (medium devices and up)?

A lg:text-center

B md:text-center

C text-center md:text-center

D text-center md:

💡 Hint

Tailwind uses prefixes like md: to apply styles from that breakpoint and up.

The md: prefix applies styles starting at the medium breakpoint (768px). Option B correctly uses md:text-center to center text only on medium screens and larger. Option B is invalid syntax. Option B applies text-center always and again at md, so not only at md. Option B applies styles at large screens (1024px) and up.

❓ layout

intermediate

Mobile-First Responsive Layout with Tailwind

Given this Tailwind HTML snippet, what will be the width of the div on a small screen (less than 640px)?

<div class="w-full sm:w-1/2 lg:w-1/4">Content</div>

Tailwind

<div class="w-full sm:w-1/2 lg:w-1/4">Content</div>

A 100% width

B 25% width

C 50% width

D 0 width (hidden)

💡 Hint

Tailwind applies styles without prefixes first, then overrides at breakpoints.

The class w-full applies 100% width by default (mobile first). The sm:w-1/2 applies 50% width starting at 640px, and lg:w-1/4 applies 25% width starting at 1024px. On screens smaller than 640px, only w-full applies.

❓ rendering

advanced

Visual Result of Mobile-First Flexbox Layout

What will you see on a mobile screen (less than 640px wide) for this Tailwind HTML?

<div class="flex flex-col sm:flex-row">
  <div class="p-4 bg-blue-500">Box 1</div>
  <div class="p-4 bg-green-500">Box 2</div>
</div>

Tailwind

<div class="flex flex-col sm:flex-row">
  <div class="p-4 bg-blue-500">Box 1</div>
  <div class="p-4 bg-green-500">Box 2</div>
</div>

A Boxes hidden

B Boxes side by side horizontally, blue box left, green box right

C Boxes overlap each other

D Boxes stacked vertically, blue box on top, green box below

💡 Hint

The flex-col class stacks items vertically, and sm:flex-row changes layout on larger screens.

On mobile screens, flex-col applies, stacking boxes vertically. The sm:flex-row applies only on screens 640px and wider, changing layout to horizontal. So on mobile, boxes appear stacked with Box 1 on top.

❓ accessibility

advanced

Accessibility Considerations in Mobile-First Design

Which practice best improves accessibility for a mobile-first navigation menu using Tailwind CSS?

A Use semantic <nav> element with aria-label and ensure keyboard focus styles are visible

B Hide navigation on mobile using display:none without alternative access

C Use only color changes to indicate active menu items without focus styles

D Use <div> elements for navigation without roles or labels

💡 Hint

Accessibility means everyone can use your site, including keyboard users and screen readers.

Using semantic

with an aria-label helps screen readers understand the navigation. Visible keyboard focus styles help users who navigate with keyboards. Hiding navigation without alternatives or using only color changes harms accessibility. Using

without roles or labels provides no semantic meaning.

🧠 Conceptual

expert

Why Mobile-First CSS is Preferred in Tailwind

Why does Tailwind CSS use a mobile-first approach for its responsive utilities?

A Because mobile-first CSS disables styles on desktop by default

B Because desktop styles override mobile styles by default, making desktop easier to style

C Because mobile-first CSS loads smaller styles first, improving performance on mobile devices

D Because mobile-first CSS requires writing more code, which is better for maintainability

💡 Hint

Think about what devices usually have slower connections and smaller screens.

Mobile-first CSS applies base styles for small screens first, then adds overrides for larger screens. This means mobile devices load only essential styles initially, improving performance. Desktop styles override mobile styles as needed. Options B, C, and D are incorrect or misleading.

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