Why you have an additional space when you have set width or height to screen size (100vw) — TainwindCSS

Fredric Cliver
Aug 18, 2021

Even you have set the width as 100vw (It means 100% of screen, correspondent with ‘h-screen’ on TailwindCSS)

You got additional margin.

Because, the 100vw size doesn't count the size of scroll bar. To resolve this, You can choose two options.

Use ‘w-full’ but ‘w-screen’

Use ‘w-full’ but ‘w-screen’, and that count the size of scroll bar, and doesn’t make additional margin.

Or add ‘w-max-full’

Or add ‘w-max-full’. It limits the width to full of width. And it’s not over the full width of the screen.

Check a post on the StackOverFlow

https://stackoverflow.com/questions/25225682/difference-between-width100-and-width100vw/26939293#26939293

--

--

Fredric Cliver

Majored in Physics, self-taught and worked in the IT industry as a Dev/Design/Planning for 11 years. And I had run my Startup for 3 years. I fancy a ☔️ 🇬🇧