Question 1

What are Tailwind CSS breakpoints?

Accepted Answer

Tailwind uses 5 breakpoints by default: sm (640px), md (768px), lg (1024px), xl (1280px), and 2xl (1536px). These are mobile-first, meaning styles apply at that size and above.

Question 2

How does mobile-first design work in Tailwind?

Accepted Answer

Unprefixed classes apply to all sizes. Prefixed classes (sm:, md:, lg:) apply from that breakpoint up. For example, 'text-sm md:text-lg' means small text on mobile, large text on medium screens and up.

Question 3

Can I customize Tailwind breakpoints?

Accepted Answer

Yes, in tailwind.config.js under theme.screens. You can add, remove, or modify breakpoints. Use min-width for mobile-first or max-width for desktop-first approaches.

Question 4

What's the difference between sm and min-width: 640px?

Accepted Answer

They're the same. 'sm:' is Tailwind's shorthand for '@media (min-width: 640px)'. It makes responsive classes more readable and consistent across your project.

Breakpoint Visualizer

default

sm

md

lg

xl

2xl

Responsive Text Size

Responsive Grid

Hide on Mobile

Show only on Mobile

You might also like

Container Query Preview

Touch Target Checker