NextJS13.4+配Tailwind，设w-screen(100vw)仍触发Chrome横向滚动条

这段内容是我在大型项目踩坑后整理的，希望能帮到遇到同样问题的人。

场景：在NextJS/Tailwind项目中，页面仅存在一个垂直方向的长元素，给它加了Tailwind的w-screen类（对应CSS的width:100vw），结果却触发了横向滚动条，由此产生三个疑问，以下是对应的解答：

疑问与解答 #

1. 明明设置了width:100vw，为什么还会触发横向滚动条？ #

核心原因是浏览器垂直滚动条的宽度占用。100vw代表视口的整体宽度，当页面内容过长出现垂直滚动条时，这个滚动条会占用一部分水平空间，但100vw并不会扣除滚动条的宽度，而是直接按照包含滚动条的视口宽度计算，导致元素实际宽度超出页面可用空间，最终触发横向滚动条。

2. NextJS/Tailwind默认有没有隐式添加需要注意的外边距/内边距？ #

Tailwind的基础样式（@tailwind base）已经默认重置了浏览器的默认样式，比如给body设置了margin:0，不会额外添加多余的边距。需要注意的是，NextJS的App Router（app目录）下，若未按官方步骤引入Tailwind的基础样式，可能会保留浏览器默认样式，但只要正常配置了Tailwind，就不用担心这个问题。

3. 需要全局手动设置box-sizing: border-box吗？ #

不需要。Tailwind的基础样式已经全局设置了box-sizing: border-box，所有元素都会继承这个属性，无需手动添加。

复现问题的最简代码 #

// app/page.js
'use client'
import React from 'react';

export default function Page(props) {
  return (
    <div className='w-screen'>
      <div className='bg-blue-500'>
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
        ASDF<br />
      </div>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Octo Palm Tree