Breakpoint prefixes

Last reviewed Jun 1, 2026 Content v20260601

Track mode

iframe_html

Means

HTML preview sandbox

Reading

~1 min

Level

intermediate

This lesson

This lesson teaches Breakpoint prefixes—the ideas, syntax, and habits you need before moving on in Tailwind CSS.

Config-driven utilities are how most greenfield product CSS is written today.

You will apply Breakpoint prefixes in contexts like: React/Vue/Next apps, marketing sites, design systems, and rapid prototypes where consistency and speed matter.

Read the lesson, edit HTML/CSS in the playground, press Run to preview, then answer the lesson MCQs.

When the previous lesson's MCQs feel easy and you can explain Breakpoint prefixes in your own words.

Default breakpoints: sm 640px, md 768px, lg 1024px, xl 1280px, 2xl 1536px. Prefix any utility: lg:grid-cols-4, sm:p-6, md:hidden.

Order in markup

List base classes first, then responsive variants grouped by breakpoint. Tailwind sorts generated CSS so variants override base regardless of source order in HTML—still, readable markup helps teammates.

Document your map

Teams should publish breakpoint values in design docs. Custom screens belong in theme.extend.screens so prefixes stay truthful.

Self-check

At what pixel width does lg: typically activate?
Why document breakpoints for designers and developers?

Challenge

Prefix ladder

Stack text-sm md:text-base lg:text-lg on one heading.
Narrow below md and widen past lg.

Done when: font size steps up at each breakpoint.

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

Which breakpoint prefix did you use most?
What happens below the md threshold?

No discussion yet. Be the first to ask a question.