无法使用tailwindcss垂直增加高度答案

【问题标题】：Not able to increase height vertically using tailwindcss无法使用tailwindcss垂直增加高度
【发布时间】：2021-09-02 07:07:18
【问题描述】：

我无法垂直增加块的大小。

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

这是我的 tailwindcss 游乐场链接

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

谁能告诉我该怎么做？

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

【问题讨论】：

您是否尝试过 flex box 或 boostrap row with column？和使其具有响应性

标签： html css layout responsive-design tailwind-css

【解决方案1】：

修改你的第一行代码

<div class="---">

到

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

【讨论】：

【解决方案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>

【讨论】：