Tailwind CSS - 最小寬度

Tailwind CSS 的 min-width 是一個實用程式類，提供了一種有效的方法來處理內容的最小寬度。它用於設定或操作任何 HTML 元素的最小寬度。

Tailwind CSS 最小寬度類

以下是 **Tailwind CSS 最小寬度** 類的列表，它們提供了一種有效的方法來處理內容的最小寬度。

類名	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>

列印頁面