Search code examples
tailwind-css

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"

Solution

  • Change h-screen to min-h-screen