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:
<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
Class | Properties |
---|---|
min-w-0 | min-width: 0px; |
min-w-full | min-width: 100%; |
min-w-min | min-width: min-content; |
min-w-max | min-width: max-content; |
Windframe Tailwind blocks
Windframe is a drag and drop builder for rapidly building tailwind css websites and UIs