How can I set min-height in Tailwind?

Setting the minimum height of elements in Tailwind CSS is an intuitive and flexible process that can be achieved using the utility class min-h-{size}, where {size} represents a specific dimension value.

For example, if you want to set an element's minimum height to 64 pixels, you can use the class min-h-16, as Tailwind's default configuration defines each size unit as approximately 4 pixels (16 * 4 = 64 pixels). Here is a specific example:

html
<div class="min-h-16">
  <p>This div has a minimum height of 64 pixels.</p>
</div>

Tailwind also supports responsive and dynamic minimum height settings. Suppose you want an element to have a minimum height of 64 pixels on small screens and 256 pixels on medium screens; you can use the following class names:

html
<div class="min-h-16 md:min-h-64">
  <p>This div has a responsive minimum height.</p>
</div>

Additionally, if the default dimensions do not meet your requirements, you can customize them in the tailwind.config.js file. For instance, add a class min-h-120 with a value of 480 pixels:

javascript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      minHeight: {
        '120': '30rem',  // 30rem typically equals 480px
      }
    }
  }
}

Then you can directly apply this new class name in HTML:

html
<div class="min-h-120">
  <p>This div has a customized minimum height of 480 pixels.</p>
</div>

By employing these methods, you can flexibly control and apply minimum height settings, ensuring the layout aligns better with design requirements and user experience.