Tailwind CSS uses rem-based breakpoints by default, which means a user's browser default font size setting can shift layout breakpoints in unexpected ways. Unlike author-set CSS font sizes (which don't affect media query resolution) or page zoom (which scales everything), changing the browser's default font size moves rem/em breakpoints but leaves px breakpoints frozen. This creates a trade-off: rem breakpoints better serve users who increase their default font size for readability, but they make layouts less predictable since developers rarely test against non-16px browser defaults. The post clarifies that px breakpoints still satisfy WCAG 1.4.4 via page zoom, so choosing rem is going beyond the standard, not merely complying. Developers should consciously choose between rem and px breakpoints based on which user behavior they're optimizing for, rather than inheriting Tailwind's default without understanding the implications. Configuration examples for overriding breakpoints in both Tailwind v3 and v4 are provided.
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 answerSources153.3K Impressions5 Comments