How to set a background color to full page using Tailwind CSS ?
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:
Please Login to comment...