Tailwind CSS - Min-Width
Tailwind CSS min-width 是一个实用类，它提供了一种有效处理内容最小宽度的方法。它用于设置或修改任何 HTML 元素的最小宽度。
Tailwind CSS min-width 类
以下是 Tailwind CSS min-width 类的列表，这些类提供了一种有效处理内容最小宽度的方法。
| 类 | CSS 属性 |
|---|---|
| min-w-0 | min-width: 0px; |
| min-w-1 | min-width: 0.25rem; /* 4px */ |
| min-w-2 | min-width: 0.5rem; /* 8px */ |
| min-w-3 | min-width: 0.75rem; /* 12px */ |
| min-w-4 | min-width: 1rem; /* 16px */ |
| min-w-5 | min-width: 1.25rem; /* 20px */ |
| min-w-6 | min-width: 1.5rem; /* 24px */ |
| min-w-7 | min-width: 1.75rem; /* 28px */ |
| min-w-8 | min-width: 2rem; /* 32px */ |
| min-w-9 | min-width: 2.25rem; /* 36px */ |
| min-w-10 | min-width: 2.5rem; /* 40px */ |
| min-w-11 | min-width: 2.75rem; /* 44px */ |
| min-w-12 | min-width: 3rem; /* 48px */ |
| min-w-14 | min-width: 3.5rem; /* 56px */ |
| min-w-16 | min-width: 4rem; /* 64px */ |
| min-w-20 | min-width: 5rem; /* 80px */ |
| min-w-24 | min-width: 6rem; /* 96px */ |
| min-w-28 | min-width: 7rem; /* 112px */ |
| min-w-32 | min-width: 8rem; /* 128px */ |
| min-w-36 | min-width: 9rem; /* 144px */ |
| min-w-40 | min-width: 10rem; /* 160px */ |
| min-w-44 | min-width: 11rem; /* 176px */ |
| min-w-48 | min-width: 12rem; /* 192px */ |
| min-w-52 | min-width: 13rem; /* 208px */ |
| min-w-56 | min-width: 14rem; /* 224px */ |
| min-w-60 | min-width: 15rem; /* 240px */ |
| min-w-64 | min-width: 16rem; /* 256px */ |
| min-w-72 | min-width: 18rem; /* 288px */ |
| min-w-80 | min-width: 20rem; /* 320px */ |
| min-w-96 | min-width: 24rem; /* 384px */ |
| min-w-px | min-width: 1px; |
| min-w-0.5 | min-width: 0.125rem; /* 2px */ |
| min-w-1.5 | min-width: 0.375rem; /* 6px */ |
| min-w-2.5 | min-width: 0.625rem; /* 10px */ |
| min-w-3.5 | min-width: 0.875rem; /* 14px */ |
| min-w-full | min-width: 100%; |
| min-w-min | min-width: min-content; |
| min-w-max | min-width: max-content; |
| min-w-fit | min-width: fit-content; |
Tailwind CSS 最小宽度类的功能
- min-w-*:指定最小宽度可设置为特定长度。 * 可以替换为表中列出的任何可接受值。
- min-w-px: 指定最小宽度为 1px。
- min-w-full: 指定最小宽度设置为全宽。
- min-w-fit: 指定最小宽度设置为屏幕尺寸。
- min-w-min: 此类用于指定最小容量时的最小宽度。
- min-w-max: 此类用于指定最大容量时的最小宽度。
Tailwind CSS 最小宽度类示例
以下示例将说明 Tailwind CSS 最小宽度类的实用功能。
设置最小宽度
我们使用了 CSS 最小宽度属性如此多次，因为在这里我们也可以使用上述类来实现。
示例
在此示例中，我们将创建三个元素，并使用上述类设置不同的最小宽度。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h2 class="text-2xl mb-3">
Tailwind CSS min-width Class
</h2>
<div class="min-w-48 inline-block
bg-green-400 h-12 rounded-lg p-2.5 m-2">
This box has min-w-48
</div>
<br>
<div class="min-w-96 inline-block
bg-green-400 h-12 rounded-lg p-2.5 m-2">
This box has a minimum width of min-w-96.
</div>
<div class=" min-w-40 inline-block bg-green-400
h-auto rounded-lg p-2.5 m-2">
This box has a min-w-40. But the content is
larger than the min-width. Hence the value of min-width
has no effect. This is a dimensional property which can
be styled using tailwind CSS.
</div>
</body>
</html>
条件最小宽度
我们可以根据悬停、聚焦或屏幕尺寸等条件更改最小宽度值。要设置任何元素最小宽度的条件，我们可以使用 `hover` 和 `focus` 类。
示例
在以下示例中，我们将在悬停在元素上时更改最小宽度值。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h2 class="text-2xl mb-3">
Tailwind CSS min-width Class
</h2>
<div class="min-w-96 inline-block hover:min-w-0
bg-green-400 h-12 rounded-lg p-2.5 m-2">
Hover over me
</div>
</body>
</html>
