Breakpoint prefixes (sm, md, lg, xl, 2xl) in Tailwind - Browser Rendering Trace

Render Flow - Breakpoint prefixes (sm, md, lg, xl, 2xl)

Parse Tailwind CSS config

↓

Identify breakpoint prefixes

↓

Generate media queries

↓

Apply styles conditionally

↓

Render elements with responsive styles

The browser reads Tailwind's breakpoint prefixes, converts them into media queries, and applies styles only when the viewport matches those sizes.

Render Steps - 6 Steps

Code Added:bg-blue-500

Before

[__________]
|          |
|          |
|          |
|__________|
(No background color)

→

After

[##########]
|          |
|          |
|          |
|__________|
Background: Blue

The box gets a blue background by default on all screen sizes.

🔧 Browser Action:Apply base CSS rule for background color

Code Sample

A box changes its background color at different screen widths using Tailwind's breakpoint prefixes.

Tailwind

<div class="bg-blue-500 sm:bg-green-500 md:bg-yellow-500 lg:bg-red-500 xl:bg-purple-500 2xl:bg-pink-500">
  Responsive Box
</div>

Render Quiz - 3 Questions

After applying step 4 (lg:bg-red-500), what background color does the box have at 1100px width?

A Green

B Yellow

C Red

D Blue

Common Confusions - 3 Topics

Why doesn't my sm: class apply on small phones?

The sm: prefix applies styles only when the screen width is 640px or wider. Small phones are usually narrower, so the base styles apply instead (see render_step 2).

💡 Breakpoint prefixes apply styles only at or above their min-width.

Why do larger breakpoints override smaller ones?

Because media queries for larger breakpoints come later and have higher specificity, they override smaller breakpoint styles when the screen is wide enough (see render_steps 3-6).

💡 Styles cascade upward with increasing screen size.

What happens if I remove the base class and only use md:?

Without a base style, the element has no style below 768px, so it may look plain or default until the md breakpoint is reached (see render_step 3).

💡 Always include base styles for default appearance.

Property Reference

Breakpoint Prefix	Min Width (px)	CSS Media Query	Visual Effect	Common Use
sm	640	@media (min-width: 640px)	Apply styles on small+ screens	Phones landscape, small tablets
md	768	@media (min-width: 768px)	Apply styles on medium+ screens	Tablets
lg	1024	@media (min-width: 1024px)	Apply styles on large+ screens	Laptops
xl	1280	@media (min-width: 1280px)	Apply styles on extra-large+ screens	Desktops
2xl	1536	@media (min-width: 1536px)	Apply styles on very large screens	Large desktops

Concept Snapshot

Breakpoint prefixes in Tailwind (sm, md, lg, xl, 2xl) add styles at specific screen widths. They correspond to min-width media queries: 640px, 768px, 1024px, 1280px, 1536px. Styles cascade upward, overriding smaller breakpoints. Always include base styles for default appearance. Use prefixes to make designs responsive and adapt to screen size.