如何在Tailwind CSS中实现移动端居中、桌面端左对齐？

你的代码问题出在Tailwind的移动优先特性——默认样式（无断点前缀）对应最小屏幕尺寸，带断点前缀的样式（如sm:）仅在对应尺寸及以上生效。你没有设置移动端的justify属性，所以默认继承flex的justify-start（左对齐），而sm:justify-center只在640px以上的屏幕才会生效，这就导致小于640px的移动端始终左对齐。

修改后的代码如下：

<div className="flex w-full justify-center lg:justify-start items-center">
  <Button title={data.title as string}></Button>
</div>

代码说明： #

• justify-center：给默认的移动端（最小屏幕）设置水平居中对齐
• lg:justify-start：在lg尺寸（1024px及以上，即桌面端）覆盖为左对齐，若你的桌面端分界是md（768px），可改为md:justify-start
• items-center直接写默认样式即可，无需加sm:前缀，确保所有屏幕下元素垂直居中

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