有一个名为.h-screen的tailwind类，它可以转换为height:100vh; css。这应该也可以。有关详细信息，请参阅Official Tailwind documentation

您可以将min-h-screen添加到父<div>，这将填充视点的高度。
与h-screen的不同之处在于，它会在屏幕上伸展。当屏幕很小，内容用滚动条溢出时，这会很有帮助。在这种情况下，背景将不会填充向上滚动部分的其余部分。

<div class="flex items-stretch bg-grey-lighter min-h-screen">
    <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
    <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
    <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>

字符串
链接到tailwind play的一些片段（添加了背景颜色示例以澄清它）：https://play.tailwindcss.com/8Qd822yY4w

可以使用Tailwind CSS的.h-screen类。

我用的是NextJS + tailwindcss。NextJS添加了一个<div id="__next">，所以这就是我的global.css中的内容

@tailwind base;
@tailwind components;
@tailwind utilities;
html {
  @apply h-full;
}
body {
  @apply h-full;
}
div#__next {
  @apply h-full;
}
main {
  @apply h-full;
}

字符串
在我的页面上

<main className="bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500">
  ...
</main>

型

我知道这是一个老帖子，但我现在发现了它，当我试图在内容太少而无法填满屏幕时将背景颜色拉伸到屏幕的大小，并避免在内容超过屏幕大小时背景颜色突然停止（这发生在h屏幕上）。我用min-h-screen解决了这个问题。

你可以在你的主div中使用h-screen类。查看更多here

当正文的内容太少而无法填满整个屏幕时，我会使用flexbox垂直均匀地拉伸较小的div。
确保body和父div具有100%的高度，并使用flex box作为列，并添加flex-basis以垂直均匀地展开。

html, body {height: 100%;}

.flex {
  display: flex;
  height: 100%;
  flex-direction: column;
}

.flex-1 {
/* or flex-grow: 1; */
flex-basis: 33.33%;
}

字符串

因为我想我可能不是这里唯一一个试图用半透明背景色制作全屏div的人。下面是一种明确方法：

<div className='bg-black bg-opacity-80 h-screen w-screen top-0 left-0 fixed'></div>

字符串
如果z-index与您的用例相关，您还可以选择添加z-10。

对于移动的，任何与“h-screen”相关的内容都会引起问题，因为它会将样式设置为
高度：100 vh
在移动的上，整个屏幕被视为100 vh，这意味着您的内容将溢出屏幕。这是由于动态工具栏是每台设备所独有的。我建议您手动将高度设置为100 svh，以确保无论您在移动的上还是在桌面上查看内容，内容都能正确呈现。据我所知，Tailwindcss（目前）还没有动态视口的选项。

<div style="height: 100svh" class="flex items-stretch bg-grey-lighter">
   <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
   <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
   <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>

字符串