C C++ CMake CSS Cypress date-fns Django Django REST Framework ESLint Git GNU Make HTML htmx HTTP JavaScript MariaDB NumPy pandas PHP PostgreSQL Python PyTorch Qt SQLite Tailwind CSS

Mastering Element Height with Min-Height in Tailwind CSS


Setting Minimum Height

Tailwind offers a few pre-defined classes for setting minimum heights:

  • min-h-screen
    Sets the minimum height to the viewport height.
  • min-h-full
    Makes the element take up the full height of its container.
  • min-h-0
    Sets the minimum height to 0 pixels.

Using Custom Values

There are two ways to set custom minimum heights in Tailwind:

  1. Just-in-Time (JIT) Mode
    (Enabled by default in v3 onwards)

    • You can directly specify the height value within square brackets. For example:
      <div class="inline-block min-h-[1rem]">Content...</div>
      This sets the minimum height to 1rem.

Customization

By default, Tailwind combines the standard spacing scale with additional height-specific values for min-height utilities. You can customize the spacing scale in your tailwind.config.js file to adjust the available min-height options.

Additional Points

  • Remember, min-height only defines the minimum size; content can still push the element larger.
  • Tailwind generates responsive variants for min-height utilities by default. You can configure this behavior in the variants section of your tailwind.config.js file.

Basic Min-Height Classes

<div class="min-h-0"> This element will collapse to its content height.
</div>

<div class="min-h-full border p-4"> This element will fill the entire height of its parent container.
</div>

<div class="min-h-screen bg-gray-200">  This element will take up the full height of the viewport.
</div>

Custom Min-Height with JIT Mode

<img class="w-full min-h-[200px]" src="image.jpg" alt="Image">  <section class="min-h-[calc(100vh - 80px)]">  </section>

Custom Min-Height with Extended Theme

Assuming you've extended the theme with your spacing scale in tailwind.config.js:

<div class="min-h-4 mb-4">  Content
</div>

<div class="md:min-h-8 lg:min-h-12">  </div>

Fixed Height

  • Use the h-* utilities to set a fixed height for the element. This is ideal when you know the exact desired size and want to avoid content overflowing.

Flexbox

  • Leverage the flexbox utilities like flex, flex-grow, and flex-shrink to control how elements distribute space within their container. This approach allows for dynamic resizing based on content and available space.

Grid Layout

  • Utilize the grid layout utilities like grid, grid-rows, and grid-template-rows to define the minimum height of rows within your grid container. This offers more control over the layout structure.

Viewport Units (vh)

  • Use the h-vh utility to set the height as a percentage of the viewport height. This can be useful for elements that should always take up a specific portion of the screen.
  • Minimum height relative to viewport
    Use h-vh.
  • Dynamic resizing based on content
    Use flexbox or grid layout.
  • Fixed size with no overflow
    Use h-* utilities.