使用Tailwind CSS的width-screen类时始终出现横向滚动条问题

我在Vite+React项目中学习用Tailwind CSS进行样式开发，遇到一个问题：当使用width-screen（即w-screen类）时，页面底部总是会出现横向滚动条，想咨询这是否属于Tailwind的Bug？

相关截图 #

代码示例 #

import React from 'react'

function Headers() {
  return (
    <>
      Headers part
      Headers part
      Headers part
      Headers part
      Headers part
      Headers part
    </>
  )
}

export default Headers

这不是Tailwind的Bug，核心原因如下：

1. 浏览器默认给body设置了8px的margin，而w-screen是将元素宽度设为100vw（视口宽度），此时元素宽度加上body的margin会超出视口，触发横向滚动条。
2. vw单位的计算不包含浏览器滚动条宽度，当页面出现纵向滚动条时，100vw会比实际可用宽度宽出滚动条的宽度，导致溢出。

解决方法 #

• 重置全局默认样式：确认Tailwind的preflight（内置的基础样式重置）已开启（默认开启），它会自动消除body的默认margin；如果未开启，可手动给body添加m-0类。
• 替换或配合其他类使用：
  • 若父元素是body且已重置默认样式，用w-full替代w-screen，w-full会继承父元素宽度，避免溢出。
  • 给使用w-screen的元素添加box-border类，确保padding和border不会额外增加元素宽度。
  • 改用min-w-screen，让元素最小宽度适配视口，同时允许内容自然扩展。
• 排查其他溢出因素：检查页面中是否有绝对定位元素、负margin或超出容器的子元素，这些也可能导致横向滚动条。

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