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.
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.
<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.
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.