Question 1

What are CSS breakpoints?

Accepted Answer

CSS breakpoints are specific viewport widths where your responsive layout changes. Using media queries (like @media (min-width: 768px)), you define how content reflows for different screen sizes. Frameworks like Tailwind CSS provide predefined breakpoints so you don't have to choose values manually.

Question 2

What are the Tailwind CSS v4 breakpoints?

Accepted Answer

Tailwind CSS v4 uses these breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px), and 2xl (1536px). They are mobile-first, meaning styles apply at the breakpoint width and above. For example, md:grid-cols-2 applies from 768px upwards.

Question 3

What are the Bootstrap 5 breakpoints?

Accepted Answer

Bootstrap 5 uses: xs (<576px), sm (576px), md (768px), lg (992px), xl (1200px), and xxl (1400px). Like Tailwind, Bootstrap uses a mobile-first approach — breakpoint classes apply from the specified width upwards.

Question 4

What are the Material UI v6 breakpoints?

Accepted Answer

Material UI (MUI) v6 uses: xs (0px), sm (600px), md (900px), lg (1200px), and xl (1536px). These values differ from both Tailwind and Bootstrap, so the same device may fall into a different breakpoint depending on which framework you use.

Question 5

Why do frameworks use different breakpoint values?

Accepted Answer

Each framework chose breakpoint values based on their design philosophy and target devices at the time. Bootstrap was designed earlier and used values common in that era. Tailwind optimised for modern devices. Material UI aligned with Material Design guidelines. The differences are small but can affect edge-case devices.

Question 6

Should I use mobile-first or desktop-first breakpoints?

Accepted Answer

All major CSS frameworks use mobile-first (min-width) breakpoints. This means you design for the smallest screen first, then add complexity for larger screens. Mobile-first leads to simpler CSS, better performance on mobile, and forces you to prioritise content — which generally results in better designs.

Responsive Breakpoint Visualiser

Framework Comparison

Frequently Asked Questions

Audit your site at every breakpoint

Breakpoint	Tailwind CSS	Bootstrap	Material UI
XS / Default	0–639px	0–575px	0–599px
SM	640px	576px	600px
MD	768px	768px	900px
LG	1024px	992px	1200px
XL	1280px	1200px	1536px
2XL / XXL	1536px	1400px	—