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.