Open In App

How to set a background color to full page using Tailwind CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn to apply background color using Tailwind CSS.

Approach:

We can set a full-page background color by simply changing the screen height of an HTML body. In Tailwind  CSS, we use an alternative of CSS background-color property which is represented as background-color-opacity ( eg: bg-blue-200 ) and it is used to specify the background color of an element. The background covers the total size of the element with padding and border but excluding margin.

Note: For screen height, you can use ‘h-screen’ to make an element span the entire height of the view port. 

Syntax:

<body class="h-screen bg-gradient-to-b from-green-200 to-green-500" >

Example 1: The following example sets the full background color of an HTML document with 3 divs.

HTML




<!DOCTYPE html>
<html>
    <head>
        <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
              rel="stylesheet" />
        <style>
            h2 {
                text-align: center;
            }
        </style>
    </head>
  
    <body class="h-screen bg-gradient-to-b
                 from-green-200 to-green-500">
        <h2 class="text-green-600 text-5xl font-bold">
            GeeksforGeeks
        </h2>
        <center>
            <b>Tailwind CSS background color</b>
        </center>
        <br />
        <div class="mx-2 grid grid-cols-3 gap-2
                    bg-blue-800 rounded-lg">
            <div class="p-6 bg-green-600 border-dashed 
                        border-4 border-green-300">
                Dashed border
            </div>
            <div class="p-6 bg-green-600 border-double
                        border-4 border-green-300">
                Double border
            </div>
            <div class="p-6 bg-green-600 border-dotted
                        border-4 border-green-300">
                Dotted border
            </div>
        </div>
    </body>
</html>


Output:

Example 2: If you avoid using utilities for setting the height of an element like h-screen as in the above code then you will get the same result, by simply using background-color-opacity ( bg-blue-200 ) on the HTML body.

HTML




<!DOCTYPE html>
<html>
    <head>
        <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
              rel="stylesheet" />
    </head>
  
    <body class="bg-blue-200 text-center">
        <h2 class="text-green-600 text-5xl font-bold">
            GeeksforGeeks
        </h2>
        <b>Tailwind CSS Background Color Class</b>
  
        <p>
            Using Tailwind CSS background color is fun
        </p>
    </body>
</html>


Output:



Last Updated : 26 May, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads