It took some time to identify the root cause of this issue within a larger project. Hopefully, this Question and Answer will be beneficial to someone else.
Here is the scenario -- in a NextJS/Tailwind project, there is only one large vertical element on the screen with its width set using Tailwind's w-screen, which translates to width: 100vw; in CSS.
These questions have emerged:
- If the width is specified as
100vw, why is the horizontal scrollbar appearing? - Is NextJS/Tailwind's default behavior adding any margins/padding silently that I need to take into account?
- Do I need to manually define something globally like 'box-sizing: border-box';`
Below is the code snippet for better clarity: (I used simplified code to isolate the problem.)
//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
...
/* Repeat ASDF lines for brevity */
...
</div>
</div>
);
}