Proposal: Change Default Breakpoints from px to em for Enhanced Flexibility and Accessibility

[ViniciusCestarii]

I’d like to propose a discussion about changing the default breakpoints in Tailwind CSS from px to em. This change could improve the scalability, flexibility, and accessibility of designs built with Tailwind, aligning with modern best practices in responsive web design.

Why em Over px?

Using em units for breakpoints instead of px allows designs to be more adaptable to different user environments and preferences.

• Enhanced Accessibility: em units scale relative to the user's root font size. This means that if a user increases their browser’s base font size for readability, the breakpoints will adjust accordingly, ensuring a better user experience.

• Improved Flexibility: Designs built with em breakpoints are more fluid and responsive, as they adapt not just to screen sizes but also to different text size settings, making the overall design more robust across a wide range of devices.

• Alignment with Modern Best Practices: The shift towards using relative units like em and rem in CSS is widely recognized as a best practice for creating responsive and user-friendly interfaces. It encourages developers to think about design in a more flexible and adaptable way.

Challenges & Considerations

I acknowledge that changing the default units could have some implications:

• Backward Compatibility: Projects relying on the current px breakpoints might experience unexpected behavior if the default changes. It’s important to discuss how to manage this transition without disrupting existing designs.

• Learning Curve: New developers or those unfamiliar with em might find the change confusing at first. It might be beneficial to provide clear documentation and examples to help the community adjust.

Proposal for Implementation

Rather than immediately changing the default, I propose the following:

1. Introduce em as an Optional Preset: We could add em breakpoints as an optional preset or configuration in Tailwind CSS. This would allow developers to opt into using em units without forcing a change on existing projects.

2. Enhance Documentation: Add examples to the Tailwind CSS documentation demonstrating how to use em units for media queries in the configuration file. This will help developers understand how to implement responsive designs with em and encourage best practices.

I’m eager to hear what others in the community think about this idea. Would using em units for breakpoints improve your development workflow? What concerns do you have about making this change? Your feedback will be invaluable in shaping this proposal.

[adamwathan]

Already changed for v4 👍🏻

https://github.com/tailwindlabs/tailwindcss/blob/next/packages/tailwindcss/theme.css#L12

We went with rem as it behaved the best across browsers in our testing. Using em we still saw a few weird issues when zooming in Safari if I remember correctly.

[ViniciusCestarii]

That's nice!

[olets]

That link no longer points to breakpoint code. Permalink at the latest commit as of this writing

tailwindcss/packages/tailwindcss/theme.css

Lines 277 to 281 in aa15964

	--breakpoint-sm: 40rem;
	--breakpoint-md: 48rem;
	--breakpoint-lg: 64rem;
	--breakpoint-xl: 80rem;
	--breakpoint-2xl: 96rem;

[MartinCura]

Excellent change! Should this be mentioned in the v4 upgrade guide as a subtle breaking change? Haven't tested it myself but wouldn't it affect the layout (of websites that migrate v3->v4) for users that have changed the font scaling in their browsers?

(Bumped into this while reevaluating what unit to use in my projects, and considering setting the new --spacing to 4px instead of 0.25rem to try it out. Thanks for making that change easier in v4 btw!)

[olets]

For v3, I transform the default screens from px to rem with js. I wrote up my solution as a blog post: https://olets.dev/posts/convert-tailwinds-default-screens-from-px-to-rem/