React中使用Tailwind CSS无法实现Bootstrap col-md-6同类宽度效果怎么办

宽度无法修改的问题来自两个配置冲突：

• 你用来做居中的m-auto外层div没有设置宽度规则，父级flex容器的子元素默认会收缩到刚好容纳内容的尺寸，内部元素加w-full也会因为父容器宽度不足无法撑开
• 表单外层带阴影的div使用了w-max类，这个类会强制容器宽度等于内容的最小所需宽度，直接锁死了容器的最大宽度，其他宽度类都会被它的优先级覆盖

只要修改两处配置即可：

1. 给m-auto所在的div添加宽度控制类，比如需要响应式宽度可以加w-full max-w-xl（小屏占满宽度，大屏最大宽度为xl尺寸），要半屏可以直接加w-1/2，根据你的需求调整数值即可
2. 删除带阴影的div上的w-max类，替换为w-full

修改后的核心代码片段参考：

<div className="flex h-screen">
  {/* 给居中容器加宽度限制 */}
  <div className="m-auto w-full max-w-xl">
    {/* 删除w-max，换成w-full */}
    <div className="shadow font-medium bg-white rounded-md flex p-10 pt-4 items-center justify-center w-full">
      {/* 原有form代码保持不变 */}
      <form className="space-y-6" action="#" method="POST">
        {/* 其余代码无需改动 */}
      </form>
    </div>
  </div>
</div>

如果需要更宽的尺寸，调整max-w-xl的数值即可，可选值包括max-w-md、max-w-lg、max-w-2xl等，或者直接去掉max-w限制用固定宽度类比如w-3/4实现四分之三屏宽度。

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