--- title: Can we make default tailwind a more accessible choice? description: 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... canonical: https://daily.dev/posts/can-we-make-default-tailwind-a-more-accessible-choice--lnstjs7kb twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Can we make default tailwind a more accessible choice? | daily.dev og:description: 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... og:url: https://daily.dev/posts/can-we-make-default-tailwind-a-more-accessible-choice--lnstjs7kb og:image: https://api.daily.dev/og/posts/lnstJS7kB.png og:image:alt: Can we make default tailwind a more accessible choice? og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Can we make default tailwind a more accessible choice? **[Spatie](https://daily.dev/sources/spatie)** · 8 min read · 40 upvotes · 7 comments ## Summary 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. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions 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._ ## Community discussion Top comments from developers on daily.dev. **@mavros\_lykos** · 6 upvotes > I don't think accessibility is a choice ... it's the foundation of technological advancement. If technology isn't designed so everyone can use or experience it, then what are we really advancing? > That's why I lean toward defaults that respect users' accessibility preferences, even if they require developers to think more carefully about responsive design. **@agustinbarrientos** · 1 upvotes > Maybe `rem` should stay the default, with a much louder warning in the docs **@heracles2756** · 0 upvotes > I prefer px breakpoints because they make responsive behavior easier to design and maintain. **@gresakg** · 0 upvotes > How about stop using tailwind all together? Tailwind is the perfect illustration for what's happening in the modern society: give up everything for a little bit of convenience. **@gaburayondev** · 0 upvotes > Good framing at the end — this isn't a bug to fix, it's a tradeoff most devs don't even know they're making by accepting Tailwind's default. The distinction between "satisfies WCAG via zoom" and "actually adapts to user font-size preference" is the part that gets lost in most accessibility checklists, since zoom compliance is the bar everyone tests for and font-size-preference support is the thing almost nobody considers. Rem breakpoints are the more honest default for accessibility-first teams, but the "layout breaks at a narrower viewport than I tested" failure mode is a real cost if your... ## Similar posts on daily.dev - [Why default Tailwind is not always an accessible choice](https://daily.dev/posts/why-default-tailwind-is-not-always-an-accessible-choice-efwxtqbfi) · Spatie · 50 upvotes · 5 comments - [Responsive and Fluid Typography with Baseline CSS Features](https://daily.dev/posts/responsive-and-fluid-typography-with-baseline-css-features-rnoepawxs) · OddBird · 4 upvotes · 0 comments --- Tags: [#css](https://daily.dev/tags/css), [#ui-design](https://daily.dev/tags/ui-design), [#tailwind-css](https://daily.dev/tags/tailwind-css), [#accessibility](https://daily.dev/tags/accessibility) [View this post on daily.dev](https://daily.dev/posts/can-we-make-default-tailwind-a-more-accessible-choice--lnstjs7kb) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Can we make default tailwind a more accessible choice?","url":"https://daily.dev/posts/can-we-make-default-tailwind-a-more-accessible-choice--lnstjs7kb","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/can-we-make-default-tailwind-a-more-accessible-choice--lnstjs7kb"},"datePublished":"2026-08-07T14:02:48.147Z","dateModified":"2026-08-07T14:03:21.525Z","description":"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...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/bb690119e9e4591ec1983602e8bb912f?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/bb690119e9e4591ec1983602e8bb912f?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Spatie","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Spatie","logo":"https://media.daily.dev/image/upload/s--gIgY1G9g--/f_auto,q_auto/v1780213606/logos/spatie?_a=BAMAMiWQ0","url":"https://daily.dev/sources/spatie"},"commentCount":7,"discussionUrl":"https://daily.dev/posts/can-we-make-default-tailwind-a-more-accessible-choice--lnstjs7kb","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":40},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":7}],"keywords":"css,ui-design,tailwind-css,accessibility","timeRequired":"PT8M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Spatie","item":"https://daily.dev/sources/spatie"},{"@type":"ListItem","position":3,"name":"Can we make default tailwind a more accessible choice?"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/can-we-make-default-tailwind-a-more-accessible-choice--lnstjs7kb","comment":[{"@type":"Comment","text":"I don’t think accessibility is a choice … it’s the foundation of technological advancement. If technology isn’t designed so everyone can use or experience it, then what are we really advancing?\nThat’s why I lean toward defaults that respect users’ accessibility preferences, even if they require developers to think more carefully about responsive design.","datePublished":"2026-08-07T15:10:28.507Z","url":"https://daily.dev/posts/lnstJS7kB#c-UhjtPyiFt","author":{"@type":"Person","name":"Charaka Hashan","url":"https://daily.dev/mavros_lykos","image":"https://media.daily.dev/image/upload/s--UhlNgzLT--/f_auto/v1786970273/avatars/avatar_rP15vFIdEPNpDSYMOi2AR?_a=BAMAMicg0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":6}},{"@type":"Comment","text":"Maybe rem should stay the default, with a much louder warning in the docs","datePublished":"2026-08-08T01:05:16.536Z","url":"https://daily.dev/posts/lnstJS7kB#c-QDT1lWYce","author":{"@type":"Person","name":"Agustin Barrientos","url":"https://daily.dev/agustinbarrientos","image":"https://media.daily.dev/image/upload/s--5ayxQnqn--/f_auto/v1788281802/avatars/avatar_wQYYVe5Tbj0NJ7C7qPoa8?_a=BAMAMicg0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"I prefer px breakpoints because they make responsive behavior easier to design and maintain.","datePublished":"2026-08-07T20:11:48.324Z","url":"https://daily.dev/posts/lnstJS7kB#c-xgrQCs4J8","author":{"@type":"Person","name":"heracles 2756","url":"https://daily.dev/heracles2756","image":"https://media.daily.dev/image/upload/s--NoOPHSFv--/f_auto/v1785506917/avatars/avatar_iYIZwiJAMuCGXY2OiXW0x?_a=BAMAMicg0"}},{"@type":"Comment","text":"How about stop using tailwind all together? Tailwind is the perfect illustration for what’s happening in the modern society: give up everything for a little bit of convenience.","datePublished":"2026-08-08T06:39:30.205Z","url":"https://daily.dev/posts/lnstJS7kB#c-7pGEZr1GR","author":{"@type":"Person","name":"Grergor","url":"https://daily.dev/gresakg","image":"https://media.daily.dev/image/upload/s--Mh3EhDVj--/f_auto/v1762860597/avatars/avatar_Z0Y5lKjimjGDZtplRmL1r?_a=BAMAK+ZW0"}},{"@type":"Comment","text":"Good framing at the end — this isn’t a bug to fix, it’s a tradeoff most devs don’t even know they’re making by accepting Tailwind’s default. The distinction between “satisfies WCAG via zoom” and “actually adapts to user font-size preference” is the part that gets lost in most accessibility checklists, since zoom compliance is the bar everyone tests for and font-size-preference support is the thing almost nobody considers. Rem breakpoints are the more honest default for accessibility-first teams, but the “layout breaks at a narrower viewport than I tested” failure mode is a real cost if your team isn’t testing with non-default font sizes.","datePublished":"2026-08-08T06:32:46.822Z","url":"https://daily.dev/posts/lnstJS7kB#c-tKJGCGAzy","author":{"@type":"Person","name":"Gabu Rayon Dev","url":"https://daily.dev/gaburayondev","image":"https://media.daily.dev/image/upload/s--5hPC52y_--/f_auto/v1773412842/avatars/avatar_8fkdziGASnSSBES6c4Ml9?_a=BAMAMiiu0"}}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/can-we-make-default-tailwind-a-more-accessible-choice--lnstjs7kb#faq","mainEntity":[{"@type":"Question","name":"Do Tailwind's default breakpoints change if a user increases their browser's default font size?","acceptedAnswer":{"@type":"Answer","text":"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."}},{"@type":"Question","name":"Do px breakpoints in CSS fail WCAG 1.4.4 Resize Text accessibility requirements?","acceptedAnswer":{"@type":"Answer","text":"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."}},{"@type":"Question","name":"How do I override Tailwind v4 breakpoints to use px instead of rem?","acceptedAnswer":{"@type":"Answer","text":"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."}}]} ```