表单右侧超出页面：Tailwind CSS中mx-4仅左侧生效的样式问题

问题出在你给textarea同时用了w-full和mx-4：默认CSS盒模型是content-box，元素总宽度=内容宽度+内边距+外边距，w-full让textarea占满父容器宽度，再加上左右各4单位的外边距，自然就超出页面了，右边的外边距直接跑到可视区域外。

给你两个简单的解决方法：

方法一：用父容器内边距替代textarea外边距（推荐） #

把父div的左右内边距加上，textarea去掉mx-4，这样整个区域的边距由父容器控制，textarea直接占满父容器宽度就不会超：

export default function TextArea() {
  return (
      <div className="w-full mt-1 px-4">
        <p className="text-purple-800 font-medium py-1">
          What are you thinking?
        </p>
        <textarea
            rows={4}
            name="comment"
            id="comment"
            className="w-full sm:w-auto md:w-2/3 h-96 rounded-md border-white sm:text-md placeholder-gray-300 text-black"
            placeholder="Type your idea here..."
        />
      </div>
  )
}

方法二：调整textarea宽度计算 #

如果一定要保留textarea的mx-4，就把w-full改成计算后的宽度，抵消外边距的影响：

// 用calc计算宽度，mx-4是左右各0.5rem，总共1rem，所以宽度是100% - 1rem
className="w-[calc(100%-1rem)] sm:w-auto md:w-[calc(2/3-1rem)] mx-4 h-96 rounded-md border-white sm:text-md placeholder-gray-300 text-black"

第一种方法更符合Tailwind的布局思路，维护起来也更简单。

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