Have you set a background color for body?
Today’s issue will be a super simple and small one. (I’m sure you like that way too)
Is background color for the body element necessary?
When designing your web page, you might have different background colors for each section. It's common to set these colors individually for each section rather than applying it to the entire <body>
element.
By default, the <body>
element has a white background color, which is generally fine. However, have you ever noticed a small gap at the top of the browser when your user scrolls back to the top of the page?
Take a look at the GIF below to understand what I mean:
That little gap adopts the background color of your body element. If your website mostly has a white background, this isn't an issue. However, if your site has a dark background like you see above, the white space that appears when users scroll back up might look out of place.
To address this, it's always a good idea to set the background-color
property for your <body>
element to match the background color of your header or hero section.
While many people may not notice this, it's often said that "God is in the details."
📘 I’m writing a new book!
If you loved this write-up and how it was explained, you’ll absolutely love my next eBook Level up with Tailwind CSS. Pre-orders are open. Order it now before the prices go up!
📨 Newsletter suggestion
I love Tailwind CSS. If you love it too, I highly recommend subscribing to this one 👇
Tailwind Weekly: Weekly newsletter about all things Tailwind CSS. New issue every Saturday.