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.

How to Set Tailwind 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:

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

Preview

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:

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

Preview

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:

<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

🔍 Want to Learn More?

• Tailwind max Width

Windframe Tailwind blocks

Pricing