使用React+TailwindCSS无法在sm/md/lg屏幕居中容器

你遇到的问题大概率是父元素<section>宽度未撑满，或者container类与mx-auto的组合出现冲突，给你几个直接可尝试的修复方案：

方案一：确保父元素section宽度撑满 #

给section添加w-full样式，让它占满父容器宽度，这样内部div的mx-auto才能正常生效：

const ContactForm = () => {
  return (
    <section id="contactForm" className="w-full">
      <div className="max-w-6xl mx-auto my-8 py-6 bg-gray-200 rounded-md px-4">
        <h2 className="text-3xl font-semibold font-poppins">Ready To Talk?</h2>
      </div>
    </section>
  )
}

export default ContactForm

方案二：移除container类，避免样式冲突 #

Tailwind的container类本身自带左右margin:auto和内边距，和手动添加的mx-auto可能产生冲突，直接用max-w-6xl控制宽度，配合px-4处理小屏幕内边距：

const ContactForm = () => {
  return (
    <section id="contactForm">
      <div className="max-w-6xl mx-auto my-8 py-6 px-4 bg-gray-200 rounded-md">
        <h2 className="text-3xl font-semibold font-poppins">Ready To Talk?</h2>
      </div>
    </section>
  )
}

export default ContactForm

额外排查点 #

如果以上方案无效，检查这两个细节：

• 是否有全局CSS给section或div设置了float属性，这会直接导致mx-auto失效；
• 查看Tailwind配置文件，确认是否自定义修改了container类的默认样式（比如移除了mx-auto）。

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