CODEWITHSUNDEEP
tailwind-css
Richard
Richard

Reputation: 16742

How do you set a full page background color in Tailwind css?

How do you set the full page background in Tailwind?

The only attribute I can see to use is h-screen, but that doesn't work when I resize the browser.

enter image description here

Here's my code:

<body class="h-screen bg-gradient-to-b from-gray-100 to-gray-300">

Full html example:

<!doctype html>

<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>lkjh</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="css/main.css">
    </head>

    <body class="h-screen bg-gradient-to-b from-gray-100 to-gray-300">
        <br />a<br />a<br /><br /><br /><br /><br /><br />a<br /><br /><br /><br />a<br /><br /><br />a<br /><br />a<br />a<br />a<br />a<br />a<br />
    </body>
</html>

css file

@tailwind base;
@tailwind components;
@tailwind utilities;

"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2"

Upvotes: 27

Views: 57072

Answers (3)

VIVEK RAO
VIVEK RAO

Reputation: 1

The gradient background should be applied to the entire viewport without expanding beyond it update your index.html file add

min-h-screen overflow-hidden = to prevent accidental overflow due to child elements

Upvotes: 0

krishnaacharyaa
krishnaacharyaa

Reputation: 24912

Short answer

change h-screen to min-h-screen.

But why?

h-screen :takes height of the viewport.

What happens when scrolled ?

 Now the `total height` is `viewport height + scrolled height`
                                👆                  👆
                               h-screen           extra height

So it doesn't expand itself to have height of the entire screen during scroll, So this can be overcomed by using min-h-screen, meaning minimum should be the viewport height and in the occurance of scroll , expand yourself to have maximum possible height.

Upvotes: 10

Digvijay
Digvijay

Reputation: 8927

Change h-screen to min-h-screen

Upvotes: 53

Related Questions