如何在Tailwind CSS中仅为最小屏幕设置外边距，其余屏幕保持不变？

直接用以下写法就能实现你要的效果：

<div className="mx-auto sm:mx-0">...</div>

原理说明： #

Tailwind CSS是移动优先的框架，默认的类（不带断点前缀的mx-auto）会作用于最小屏幕尺寸（通常是<640px），而带断点前缀的类（比如sm:）会在对应断点及更大的屏幕上生效。

• mx-auto：默认在最小屏幕下让元素水平居中（自动左右外边距）
• sm:mx-0：当屏幕宽度达到sm断点（≥640px）时，把左右外边距重置为0，取消居中效果

这样就刚好实现了你要的「仅最小屏幕下使用自动外边距」的需求，而不会像sm:mx-auto那样反过来在小屏及以上都生效。

内容的提问来源于stack exchange，提问作者rony l