如何让Tailwind布局在桌面端仍保持移动端样式

要实现这个需求，核心是利用Tailwind移动端优先的特性，通过以下几种方式处理：

方法1：移除所有断点前缀类 #

Tailwind中不带断点前缀的类（比如px-4）默认在所有屏幕尺寸生效，而sm:、lg:这类断点前缀的类会在对应屏幕尺寸及以上覆盖基础样式。直接删掉这些断点类，就能让所有设备都使用移动端的基础样式。

修改你的代码示例：

<div className='bg-sky-600'>
  <div className="max-w-4xl mx-auto px-4">
    <div className="max-w-2xl mx-auto">
      <MainNavbar/>
      <div>
      </div>
    </div>
  </div>
</div>

原代码中的sm:px-6、lg:px-8会在大屏设备上改变内边距，移除后所有设备都保持px-4的移动端内边距。

方法2：强制断点类匹配移动端样式 #

如果不想完全删除断点类（比如需要兼容某些特殊场景），可以将断点类的样式设置为和移动端基础样式一致，强制大屏设备沿用移动端效果。

修改示例：

<div className='bg-sky-600'>
  <div className="max-w-4xl mx-auto px-4 sm:px-4 lg:px-4">
    <div className="max-w-2xl mx-auto">
      <MainNavbar/>
      <div>
      </div>
    </div>
  </div>
</div>

这里把sm:px-6改成sm:px-4，lg:px-8改成lg:px-4，确保在小屏、大屏设备上都使用移动端的内边距值。

注意事项 #

如果你的<MainNavbar/>组件内部也使用了断点前缀类，需要对组件内的代码做同样处理，否则导航栏在桌面设备上仍会显示大屏样式。

内容的提问来源于stack exchange，提问作者Adit Rachman