Last updated: 14 May 2024

Tailwind CSS Min-Width

The min-width utility class in Tailwind CSS allows you to control the minimum width of elements.


Tailwind Min Width

The min-width utility class in Tailwind CSS allows you to control the minimum width of elements. It provides a set of classes that enable you to set the minimum width to specific values, percentages, or use predefined min-width utilities for common use cases.

Setting Min-Width

To set the minimum width of an element, you can use the min-w-{size} class, where {size} can be one of the following options:

  • min-w-{value}: This sets the minimum width to a specific value in pixels.

  • min-w-full: This sets the minimum width to 100% of the parent container.

  • min-w-0: This sets the minimum width to 0, effectively hiding the element if there is no content.

Here's an example of how to use the min-width utility classes:

html
<div class="min-w-50 ....">
This div has a minimum width of 50 pixels.
</div>

Preview

This div has a minimum width of 50 pixels.

Percentage-based Min-Width

Tailwind CSS also provides utility classes for setting minimum width as a percentage of the parent container's width. You can use the min-w-{percentage} class to achieve this. Here's an example:

html
<div class="min-w-full">
This div has a minimum width of 100% of its parent container.
</div>

Preview

This div has a minimum width of 100% of its parent container.

Responsive Min-Width

Tailwind CSS allows you to control the minimum width of elements responsively at different breakpoints. To use responsive min-width classes, you can append the breakpoint prefix to the min-width classes. For example, md:min-w-48 sets the minimum width to 48 pixels starting from the medium breakpoint and above. Here's an example:

html
<div class="min-w-64 md:min-w-48">
This div has a minimum width of 64 pixels by default, and 48 pixels starting from the medium
breakpoint.
</div>

In the above example, the min-w-64 class is applied by default, setting the minimum width to 64 pixels. However, starting from the medium breakpoint and above, the md:min-w-48 class is applied, changing the minimum width to 48 pixels.

Tailwind min-width class Table

ClassProperties
min-w-0 min-width: 0px;
min-w-fullmin-width: 100%;
min-w-minmin-width: min-content;
min-w-maxmin-width: max-content;

Windframe Tailwind blocks

Pricing

Windframe is a drag and drop builder for rapidly building tailwind css websites and UIs

Start building stunning tailwind UIs! 

Build from scratch or select prebuilt tailwind templates