Published on

Tailwind CSS: How to Set a Full Page Background Color

Authors
  • Name
    Ripal & Zalak
    Twitter

Tailwind CSS: How to Set a Full Page Background Color

Setting a full-page background color in Tailwind CSS requires ensuring that the background covers the entire page, even when content overflows beyond the viewport height.

Solution in Tailwind CSS

A common approach is to use h-screen, but this only sets the height equal to the viewport, which may not be sufficient when content overflows. Instead, use min-h-screen to ensure that the background extends to cover the entire page:

<body class="min-h-screen bg-gradient-to-b from-gray-100 to-gray-300">
  <p>Full-page background color example.</p>
</body>


### Why Use `min-h-screen`?
The `h-screen` utility sets the height to the viewport height (`100vh`), but when the content grows beyond the viewport, the background does not extend. The `min-h-screen` utility ensures that the minimum height is always the viewport height while allowing for content overflow.

### Preventing Overflow Issues
If you want to avoid accidental scrollbars due to overflowing child elements, you can also add `overflow-hidden`:

```html
<body class="min-h-screen overflow-hidden bg-blue-500">
  <p>Background covers the full page.</p>
</body>

Alternative Approach: Applying Background to html

For certain layouts, applying the background to the html element ensures a consistent background:

html {
  @apply bg-gray-200;
}

FAQ

1. Why isn’t h-screen covering the full page?

h-screen sets the height to match the viewport height, but if the content extends beyond that, the background won't follow. Use min-h-screen instead.

2. How can I make a gradient background cover the entire page?

Use min-h-screen with bg-gradient-to-b or another gradient utility to ensure full-page coverage.

3. Can I set a full-page background using Tailwind utilities in html or body?

Yes, you can apply @apply bg-color directly to html in a CSS file or use Tailwind’s utility classes in body.