Tailwind CSS uses rem-based breakpoints by default (since v3.2), which means a user's browser default font size setting — not author CSS — can shift where layout breakpoints trigger. This is intentional: rem/em in media queries resolve against the browser's initial font size, so users who increase their default font size get layouts that adapt to their preference. However, this also means breakpoints fire at narrower viewports than designers tested, potentially breaking layouts. The post clarifies that px breakpoints satisfy WCAG 1.4.4 via page zoom, so rem breakpoints are a step beyond compliance, not a requirement. It explains how to override breakpoints to px in both Tailwind v3 and v4, and frames the core question as a deliberate design choice: rem breakpoints serve users who change default font size, px breakpoints serve predictable layout control — and developers should know which trade-off they're making.
Table of contents
First, what Tailwind actually shipsThe gotcha: rem in a media query is not the rem you thinkThe half nobody mentions: the user can still move themSo why is "not always accessible" in the title?The actual debateIf you want to change itThe point isn't the answerSourcesQuestions this post answers
Do Tailwind's default breakpoints change if a user increases their browser's default font size?
Yes. Tailwind's default breakpoints use rem units (e.g. md is 48rem), and rem/em values in media queries resolve against the browser's initial font size — not author CSS. So if a user sets their browser default font size to 24px instead of 16px, the md breakpoint triggers at 1152px instead of 768px. Author-set html { font-size } has no effect on media query resolution. Developers building accessible layouts track browser font-size quirks like this on daily.dev.
Do px breakpoints in CSS fail WCAG 1.4.4 Resize Text accessibility requirements?
No. WCAG 1.4.4 requires text to be resizable to 200% without loss of content or function, and the W3C explicitly lists page zoom as a sufficient technique. Page zoom scales px breakpoints along with everything else, so px breakpoints fully satisfy WCAG 1.4.4. Using rem breakpoints to honour the browser default font-size setting goes beyond what the standard requires. Teams weighing accessibility compliance vs. layout predictability find the nuance on daily.dev.
How do I override Tailwind v4 breakpoints to use px instead of rem?
In Tailwind v4, add a @theme block in your CSS file: set --breakpoint-sm: 640px, --breakpoint-md: 768px, --breakpoint-lg: 1024px, --breakpoint-xl: 1280px, and --breakpoint-2xl: 1536px. In Tailwind v3, use the theme.screens object in tailwind.config.js with the same pixel values. Developers migrating or configuring Tailwind breakpoints find related tips on daily.dev.
211.4K Impressions6 Comments