Skip to main content
Ganesh Joshi
Back to Cheatsheets

Tailwind breakpoints

Updated 2026-02-15

Tailwind responsive prefixes: sm, md, lg, xl, 2xl. Min-width breakpoints and container queries.

Breakpoints (min-width)

sm 640px, md 768px, lg 1024px, xl 1280px, 2xl 1536px. Use as prefix: md:text-lg, lg:grid-cols-3. Mobile-first: base styles, then sm:, md:, etc.

Container and max-*

container centers and sets max-width at breakpoints. max-sm:, max-md: etc. apply below that width. @container for container queries (wrap in @layer).

Tailwind breakpoints | Cheatsheet | Ganesh Joshi