在Tailwind CSS中，设置整个页面的背景色可以通过在HTML的`<body>`标签中使用背景颜色工具类（utility classes）来完成。Tailwind 提供了一系列的背景色工具类，可以用来快速地应用颜色到元素上。以下是如何操作的步骤和一个例子：

1. **查找背景色工具类**：首先，需要选择一个背景色。Tailwind CSS 提供了丰富的颜色系统，有基础的颜色也有深色或浅色的变体。例如，假设你想要一个蓝色的背景，你可以选择 `bg-blue-500`。

2. **应用到 `<body>` 标签**：接下来，将这个工具类应用到 `<body>` 标签上。这样，整个页面的背景将被设置为选定的颜色。

3. **确保TailwindCSS已正确集成**：在实际编码之前，确保你的项目已经集成了TailwindCSS，并且你的配置文件（如`tailwind.config.js`）包含了你想使用的颜色。

### 示例

假设在你的TailwindCSS项目中，你想要将整个页面的背景设置为中等深度的蓝色（例如 `bg-blue-500`）。你可以这样编写你的HTML代码：

```html
<!doctype html>
<html lang="en">
<head>
  
  <link href="/path/to/your/tailwind.css" rel="stylesheet">
</head>
<body class="bg-blue-500">
  
</body>
</html>
```

在这个例子中，整个页面的背景将会是蓝色，因为我们给 `<body>` 标签添加了 `class="bg-blue-500"`。这样，无论页面内容有多长，背景色都会覆盖整个浏览器窗口。

请务必根据你的项目和设计要求选择合适的颜色类。如果你需要使用自定义颜色，你可以在 `tailwind.config.js` 文件中进行配置并创建一个自定义工具类。

### Short answer

change `h-screen` to `min-h-screen`.

* * *

### But why?

> `h-screen` :takes height of the viewport.

#### What happens when scrolled ?

     Now the `total height` is `viewport height + scrolled height`
                                    👆                  👆
                                   h-screen           extra height
    

So it doesn't expand itself to have height of the entire screen during scroll, So this can be overcomed by using `min-h-screen`, meaning minimum should be the viewport height and in the occurance of scroll , expand yourself to have maximum possible height.

How do you set a full page background color in tailwind css

3个答案

示例

Short answer

But why?

What happens when scrolled ?

你的答案