无法使用tailwindcss垂直增加高度

Question

我无法垂直增加块的大小

实际上，当窗口的大小从小设备增加到更高时，我想垂直增加div的大小

这是我的tailwindcss游乐场链接

https://play.tailwindcss.com/9Bs25IUgOu

有人能告诉我怎么做吗？

我想在增加窗口大小的同时增加背景图像的大小以及块的高度。

Answer 1

更改中的第一行代码

<div class="---">

至

<div class="---" style = "height: 100vh;">

Answer 2

试试这个，

<div class="flex flex-col w-full bg-right-bottom bg-no-repeat bg-cover min-h-small bg-star-pattern-small">
<div class="px-3 py-5 mx-4 text-center">
<div>
<h1 class="pt-5 text-2xl font-medium md:text-4xl lg:text-5xl xl:text-6xl">FREE COFFEE</h1>
<h1 class="text-2xl font-medium leading-9 md:text-4xl lg:text-5xl xl:text-6xl">IS A TAP AWAY</h1>
</div>
<h3 class="mt-4 text-sm md:text-lg lg:text-xl xl:text-2xl">Lorem ipsum dolor sit amet consectetur.</h3>
<button class="mt-8 bg-green-700 rounded-2xl">
<p class="p-2 px-4 text-sm md:text-lg lg:text-xl xl:text-2xl font-semibold text-white">Join in the app</p>
</button>
<p class="mt-3 underline"><a href="#">or join online</a></p>
</div>
</div>