Breakpoint prefixes (sm, md, lg, xl, 2xl) in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the effect of this Tailwind class?

Consider the class md:text-center. What does it do?

A Centers text only on small screens

B Centers text only on screens medium size and larger

C Centers text on all screen sizes

D Centers text only on extra large screens

💡 Hint

Think about what the md: prefix means in Tailwind.

The md: prefix applies the style starting from the medium breakpoint and up. So md:text-center centers text on medium, large, extra large, and 2xl screens, but not on smaller ones.

❓ rendering

intermediate

Which Tailwind class combination makes text red on small screens and blue on large screens?

You want text to be red on small screens and blue on large screens. Which class combination achieves this?

A text-red-500 lg:text-blue-500

B lg:text-red-500 text-blue-500

C sm:text-red-500 xl:text-blue-500

D text-red-500 md:text-blue-500

💡 Hint

Remember that unprefixed classes apply to all sizes unless overridden.

The class text-red-500 applies red text on all screen sizes. The lg:text-blue-500 overrides it starting at large screens, making text blue there.

❓ selector

advanced

Which breakpoint prefix applies styles only on screens 1536px wide or larger?

Tailwind uses these breakpoint prefixes: sm, md, lg, xl, 2xl. Which prefix applies styles starting at 1536px width?

A md

B xl

C lg

D 2xl

💡 Hint

Check Tailwind's default breakpoint pixel values.

The 2xl prefix applies styles starting at 1536px width and above.

🧠 Conceptual

advanced

How does Tailwind apply breakpoint prefixes in CSS?

How does Tailwind implement breakpoint prefixes like sm: or lg: in the generated CSS?

A By wrapping styles inside media queries targeting min-width of the breakpoint

B By adding classes that only exist on certain screen sizes

C By using JavaScript to detect screen size and apply styles dynamically

D By duplicating styles for every breakpoint without media queries

💡 Hint

Think about how CSS handles responsive design.

Tailwind wraps breakpoint-prefixed styles inside CSS media queries with min-width matching the breakpoint value.

❓ accessibility

expert

Which breakpoint prefix usage best supports accessibility for users resizing text or zooming?

When using Tailwind breakpoint prefixes, which practice best supports accessibility for users who resize text or zoom the page?

A Use breakpoint prefixes only on font sizes, not layout

B Avoid breakpoint prefixes and rely on JavaScript for responsiveness

C Use relative units (em/rem) for breakpoints instead of fixed px values

D Use only fixed pixel breakpoints for consistent layout

💡 Hint

Think about how zoom and text resizing affect CSS units.

Using relative units like em or rem for breakpoints allows layouts to adapt better when users zoom or resize text, improving accessibility.

Practice

1. What does the md: prefix in Tailwind CSS do?

easy

A. Applies styles on all screen sizes

B. Applies styles only on medium and larger screens

C. Applies styles only on small screens

D. Applies styles only on extra large screens

Solution

1. Step 1: Understand Tailwind breakpoint prefixes

   Breakpoint prefixes like md: apply styles starting from that screen size and up.

2. Step 2: Identify what md: means

   md: applies styles on medium screens (768px) and larger devices.

3. Final Answer:

   Applies styles only on medium and larger screens -> Option B

4. Quick Check:

   md: = medium and up [OK]

Hint: Remember: prefix applies from that size and up [OK]

Common Mistakes:

• Thinking prefix applies only at exact size
• Confusing sm and md breakpoints
• Assuming prefix applies to smaller screens

2. Which of these is the correct way to make text center-aligned only on large screens and bigger using Tailwind?

easy

A. lg:text-center

B. text-center:lg

C. text-center-lg

D. text-center lg

Solution

1. Step 1: Recall Tailwind syntax for breakpoints

   Breakpoint prefixes come before the utility class, separated by a colon, e.g., lg:text-center.

2. Step 2: Check each option

   Only lg:text-center uses correct prefix + utility format.

3. Final Answer:

   <code>lg:text-center</code> -> Option A

4. Quick Check:

   Prefix + colon + utility = correct syntax [OK]

Hint: Prefix always goes before utility with a colon [OK]

Common Mistakes:

• Putting prefix after utility
• Using dash instead of colon
• Separating prefix and utility with space

3. Given this HTML snippet:

<div class="text-left md:text-center lg:text-right">Hello</div>

What will be the text alignment on a screen width of 1024px?

medium

A. Left aligned

B. Center aligned

C. Right aligned

D. Justified

Solution

1. Step 1: Identify screen size and breakpoints

   1024px is considered large (lg) screen in Tailwind (lg starts at 1024px).

2. Step 2: Determine which classes apply

   At 1024px, lg:text-right applies, overriding smaller breakpoints.

3. Final Answer:

   Right aligned -> Option C

4. Quick Check:

   lg breakpoint overrides md and base [OK]

Hint: Largest matching breakpoint prefix wins [OK]

Common Mistakes:

• Choosing center alignment at 1024px
• Ignoring lg breakpoint
• Assuming base style always applies

4. You wrote this class: sm:bg-red-500 md:bg-green-500 lg:bg-blue-500. But on a 500px wide screen, the background is still blue. What is the likely problem?

medium

A. Tailwind breakpoints are mobile-first, so larger prefixes override smaller ones

B. The order of classes is wrong; lg: should come first

C. You forgot to include the base background color without prefix

D. The lg: prefix applies to all screen sizes

Solution

1. Step 1: Check screen size vs breakpoints

   500px is below sm (640px+), so none of the prefixed classes (sm:, md:, lg:) apply at this size.

2. Step 2: Identify the missing piece

   However, if the background is still blue at 500px, it means the lg:bg-blue-500 class is applying at all screen sizes, which is incorrect behavior.

3. Step 3: Likely problem

   This usually happens if the lg: prefix is missing the colon or is malformed, causing the class to be interpreted as a normal class and applied globally.

4. Final Answer:

   The lg: prefix applies to all screen sizes -> Option D

5. Quick Check:

   Check for correct prefix syntax to ensure breakpoint applies properly [OK]

Hint: Set base styles first for smallest screens, then override with prefixes [OK]

Common Mistakes:

• Thinking sm: applies below 640px
• Believing class order determines breakpoint priority
• Forgetting base class for mobile screens

5. You want a button to have a small padding on phones, medium padding on tablets, and large padding on desktops and bigger. Which Tailwind classes achieve this?

hard

A. p-2 md:p-4 lg:p-6

B. p-6 md:p-4 lg:p-2

C. sm:p-2 md:p-4 xl:p-6

D. p-2 sm:p-4 md:p-6

Solution

1. Step 1: Understand base and breakpoint prefixes

   Base class p-2 applies to all screens, then md:p-4 overrides on medium (tablet) and up, lg:p-6 overrides on large (desktop) and up.

2. Step 2: Check each option

   p-2 md:p-4 lg:p-6 correctly sets small padding base, medium padding at md, and large padding at lg.

3. Final Answer:

   <code>p-2 md:p-4 lg:p-6</code> -> Option A

4. Quick Check:

   Base + md + lg prefixes for increasing sizes [OK]

Hint: Base class for smallest, then increase with md, lg [OK]

Common Mistakes:

• Reversing padding sizes
• Using sm prefix instead of base for smallest
• Skipping breakpoint for medium screens