Tailwind CSS - 寬度

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

Tailwind CSS 寬度類

以下是提供有效處理內容寬度方法的Tailwind CSS 寬度類列表。

類名	CSS 屬性
w-0	width: 0px;
w-px	width: 1px;
w-0.5	width: 0.125rem; /* 2px */
w-1	width: 0.25rem; /* 4px */
w-1.5	width: 0.375rem; /* 6px */
w-2	width: 0.5rem; /* 8px */
w-2.5	width: 0.625rem; /* 10px */
w-3	width: 0.75rem; /* 12px */
w-3.5	width: 0.875rem; /* 14px */
w-4	width: 1rem; /* 16px */
w-5	width: 1.25rem; /* 20px */
w-6	width: 1.5rem; /* 24px */
w-7	width: 1.75rem; /* 28px */
w-8	width: 2rem; /* 32px */
w-9	width: 2.25rem; /* 36px */
w-10	width: 2.5rem; /* 40px */
w-11	width: 2.75rem; /* 44px */
w-12	width: 3rem; /* 48px */
w-14	width: 3.5rem; /* 56px */
w-16	width: 4rem; /* 64px */
w-20	width: 5rem; /* 80px */
w-24	width: 6rem; /* 96px */
w-28	width: 7rem; /* 112px */
w-32	width: 8rem; /* 128px */
w-36	width: 9rem; /* 144px */
w-40	width: 10rem; /* 160px */
w-44	width: 11rem; /* 176px */
w-48	width: 12rem; /* 192px */
w-52	width: 13rem; /* 208px */
w-56	width: 14rem; /* 224px */
w-60	width: 15rem; /* 240px */
w-64	width: 16rem; /* 256px */
w-72	width: 18rem; /* 288px */
w-80	width: 20rem; /* 320px */
w-96	width: 24rem; /* 384px */
w-auto	width: auto;
w-1/2	width: 50%;
w-1/3	width: 33.333333%;
w-2/3	width: 66.666667%;
w-1/4	width: 25%;
w-2/4	width: 50%;
w-3/4	width: 75%;
w-1/5	width: 20%;
w-2/5	width: 40%;
w-3/5	width: 60%;
w-4/5	width: 80%;
w-1/6	width: 16.666667%;
w-2/6	width: 33.333333%;
w-3/6	width: 50%;
w-4/6	width: 66.666667%;
w-5/6	width: 83.333333%;
w-1/12	width: 8.333333%;
w-2/12	width: 16.666667%;
w-3/12	width: 25%;
w-4/12	width: 33.333333%;
w-5/12	width: 41.666667%;
w-6/12	width: 50%;
w-7/12	width: 58.333333%;
w-8/12	width: 66.666667%;
w-9/12	width: 75%;
w-10/12	width: 83.333333%;
w-11/12	width: 91.666667%;
w-full	width: 100%;
w-screen	width: 100vw;
w-svw	width: 100svw;
w-lvw	width: 100lvw;
w-dvw	width: 100dvw;
w-min	width: min-content;
w-max	width: max-content;
w-fit	width: fit-content;

Tailwind CSS 寬度類的功能

w-*：這指定了寬度，可以設定特定長度。* 可以替換為表中提到的任何可接受的值。
w-px：這將寬度指定為 1px 值。
w-auto：這指定寬度根據內容設定。
w-1/2：這指定寬度設定為視窗的一半。
w-1/3： 指定寬度設定為視窗的三分之一。
w-1/4： 指定寬度設定為視窗的四分之一。
w-1/5： 指定寬度設定為視窗的五分之一。
w-1/6： 指定寬度設定為視窗的六分之一。
w-1/12： 指定寬度設定為視窗的十二分之一。
w-full： 指定寬度設定為全寬。
w-screen： 指定寬度設定為螢幕尺寸。
w-svh： 此類將元素的寬度設定為100 svw。（svw 的含義需根據上下文補充說明，例如視窗寬度）
w-lvh： 此類將元素的寬度設定為100 lvh。（lvh 的含義需根據上下文補充說明，例如視窗高度）
w-dvh： 此類將元素的寬度設定為100 dvh。（dvh 的含義需根據上下文補充說明，例如文件高度）
w-min： 此類用於指定最小寬度。
w-max： 此類用於指定最大寬度。
w-fit： 此類將寬度設定為適合父元素內容的寬度。

Tailwind CSS 寬度類示例

以下示例將演示 Tailwind CSS 寬度類實用程式。

定義固定寬度

要定義固定寬度，我們可以使用諸如'w-px'，'w-1'和'w-24'之類的類。上表中任何有效的數值 (w-*) 都可以用來建立一個固定寬度的元素。

示例

在這個示例中，我們將建立多個元素，併為每個元素設定不同的固定寬度。

<!DOCTYPE html>
<html>

<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-xl mb-3">
        Tailwind CSS Width Class
    </h2>
        <div class="w-44 bg-green-400 h-12 
                    rounded-lg text-center m-2">w-44</div>
        <div class="w-40 bg-green-400 h-12 
                    rounded-lg text-center m-2">w-40</div>
        <div class="w-36 bg-green-400 h-12 
                    rounded-lg text-center m-2">w-36</div>
        <div class="w-32 bg-green-400 h-12 
                    rounded-lg text-center m-2">w-32</div>
        <div class="w-28 bg-green-400 h-12 
                    rounded-lg text-center m-2">w-28</div>
        <div class="w-24 bg-green-400 h-12 
                    rounded-lg text-center m-2">w-24</div>
</body>

</html>

指定百分比寬度

指定百分比寬度意味著該元素的寬度完全取決於父元素的寬度。透過使用'w-full'，'w-1/2'和'w-2/5'，我們可以設定元素寬度。

示例

在這個示例中，我們將建立多個元素，併為每個元素設定不同的百分比寬度。

<!DOCTYPE html>
<html>

<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-xl mb-3">
        Tailwind CSS Width Class
    </h2>
        <div class="w-1/12 bg-green-400 h-12 
                    rounded-lg text-center m-2">w-1/12</div>
        <div class="w-2/12 bg-green-400 h-12 
                    rounded-lg text-center m-2">w-2/12</div>
        <div class="w-3/12 bg-green-400 h-12 
                    rounded-lg text-center m-2">w-3/12</div>
        <div class="w-4/12 bg-green-400 h-12 
                    rounded-lg text-center m-2">w-4/12</div>
        
</body>

</html>

根據視口寬度定義寬度

要根據視口寬度設定元素的寬度，我們可以使用'w-screen'類。這將根據視口自動調整元素的寬度。

示例

在這個示例中，我們將建立兩個元素，在第一個元素中我們將使用'w-screen'類，而第二個元素保持為空。

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-xl mb-3">
        Tailwind CSS Width Class
    </h2>
        <div class="w-screen bg-green-400 h-12 
                    rounded-lg text-center m-2">w-1/12</div>
        <div class="bg-green-400 h-12 
                    rounded-lg text-center m-2"></div>
</body>

</html>

基於懸停的全寬

可以透過使用'hover'類來設定元素在懸停時的全寬。但您必須記住，只有全寬是可能的。

示例

在這個示例中，我們建立了一個在懸停時佔據全寬的元素。

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-xl mb-3">
        Tailwind CSS Width Class
    </h2>
        <div class="flex text-center">
        <div class="w-1/6 hover:w-full 
                    bg-green-600 h-12 rounded-lg">
            Hover over Me
        </div>
        </div>
    </div>
</body>

</html>

列印頁面