无法使用 tailwindcss 垂直增加高度

Question

I am not able to increase the size of block vertically.

Actually, I want to increase the size of div vertically when increase the size of the window from small device to the higher.

This is my tailwindcss playground link

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

Can Anyone please tell me how can I do so?

I want to increase the size of background image as well as height of block while increasing the window size.

Answer 1

change your first line of code from

<div class="---">

to

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

Answer 2

Try this,

<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>