如何使用 Tailwind CSS 将背景颜色设置为整页？

在本文中，我们将学习使用 Tailwind CSS 应用背景颜色。

方法：

我们可以通过简单地更改 HTML 正文的屏幕高度来设置整页背景颜色。在 Tailwind CSS 中，我们使用CSS background-color属性的替代方案，它表示为background-color-opacity (例如： bg-blue-200 )它用于指定元素的背景颜色。背景覆盖元素的总大小，带有填充和边框，但不包括边距。

注意：对于屏幕高度，您可以使用‘h-screen’使元素跨越视口的整个高度。

句法：

示例 1：以下示例使用 3 d iv s 设置 HTML 文档的完整背景颜色。

HTML

    
        
        
    
  
    
        

            GeeksforGeeks
        
        
            Tailwind CSS background color
        
        

        

            

                Dashed border
            
            

                Double border
            
            

                Dotted border
            
        
    

输出：

示例 2：如果您避免使用实用程序来设置元素的高度，如上述代码中的 h-screen那么您将获得相同的结果，只需在 HTML 上使用 background-color-opacity ( bg-blue-200 )身体。

HTML

    
        
    
  
    
        

            GeeksforGeeks
        
        Tailwind CSS Background Color Class
  
        

            Using Tailwind CSS background color is fun
        
    

输出：