Tailwind CSS - 最大寬度

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

Tailwind CSS 最大寬度類

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

類名	CSS 屬性
max-w-0	max-width: 0px;
max-w-px	max-width: 1px;
max-w-0.5	max-width: 0.125rem; /* 2px */
max-w-1	max-width: 0.25rem; /* 4px */
max-w-1.5	max-width: 0.375rem; /* 6px */
max-w-2	max-width: 0.5rem; /* 8px */
max-w-2.5	max-width: 0.625rem; /* 10px */
max-w-3	max-width: 0.75rem; /* 12px */
max-w-3.5	max-width: 0.875rem; /* 14px */
max-w-4	max-width: 1rem; /* 16px */
max-w-5	max-width: 1.25rem; /* 20px */
max-w-6	max-width: 1.5rem; /* 24px */
max-w-7	max-width: 1.75rem; /* 28px */
max-w-8	max-width: 2rem; /* 32px */
max-w-9	max-width: 2.25rem; /* 36px */
max-w-10	max-width: 2.5rem; /* 40px */
max-w-11	max-width: 2.75rem; /* 44px */
max-w-12	max-width: 3rem; /* 48px */
max-w-14	max-width: 3.5rem; /* 56px */
max-w-16	max-width: 4rem; /* 64px */
max-w-20	max-width: 5rem; /* 80px */
max-w-24	max-width: 6rem; /* 96px */
max-w-28	max-width: 7rem; /* 112px */
max-w-32	max-width: 8rem; /* 128px */
max-w-36	max-width: 9rem; /* 144px */
max-w-40	max-width: 10rem; /* 160px */
max-w-44	max-width: 11rem; /* 176px */
max-w-48	max-width: 12rem; /* 192px */
max-w-52	max-width: 13rem; /* 208px */
max-w-56	max-width: 14rem; /* 224px */
max-w-60	max-width: 15rem; /* 240px */
max-w-64	max-width: 16rem; /* 256px */
max-w-72	max-width: 18rem; /* 288px */
max-w-80	max-width: 20rem; /* 320px */
max-w-96	max-width: 24rem; /* 384px */
max-w-none	max-width: none;
max-w-xs	max-width: 20rem; /* 320px */
max-w-sm	max-width: 24rem; /* 384px */
max-w-md	max-width: 28rem; /* 448px */
max-w-lg	max-width: 32rem; /* 512px */
max-w-xl	max-width: 36rem; /* 576px */
max-w-2xl	max-width: 42rem; /* 672px */
max-w-3xl	max-width: 48rem; /* 768px */
max-w-4xl	max-width: 56rem; /* 896px */
max-w-5xl	max-width: 64rem; /* 1024px */
max-w-6xl	max-width: 72rem; /* 1152px */
max-w-7xl	max-width: 80rem; /* 1280px */
max-w-full	max-width: 100%;
max-w-min	max-width: min-content;
max-w-max	max-width: max-content;
max-w-fit	max-width: fit-content;
max-w-prose	max-width: 65ch;
max-w-screen-sm	max-width: 640px;
max-w-screen-md	max-width: 768px;
max-w-screen-lg	max-width: 1024px;
max-w-screen-xl	max-width: 1280px;
max-w-screen-2xl	max-width: 1536px;

Tailwind CSS 最大寬度類功能

max-w-0: 此類用於將元素寬度指定為 max-width: 0rem。
max-w-none: 此類用於將元素寬度指定為 max-width: none。
max-w-xs: 此類用於將元素寬度指定為 max-width: 20rem。
max-w-sm: 此類用於將元素寬度指定為 max-width: 24rem。
max-w-md: 此類用於將元素寬度指定為 max-width: 28rem。
max-w-lg: 此類用於將元素寬度指定為 max-width: 32rem。
max-w-xl: 此類用於將元素寬度指定為 max-width: 36rem。
max-w-2xl: 此類用於將元素寬度指定為 max-width: 42rem;
max-w-3xl: 此類用於將元素寬度指定為 max-width: 48rem。
max-w-4xl: 此類用於將元素寬度指定為 max-width: 56rem。
max-w-5xl: 此類用於將元素寬度指定為 max-width: 64rem。
max-w-6xl: 此類用於將元素寬度指定為 max-width: 72rem。
max-w-7xl: 此類用於將元素寬度指定為 max-width: 80rem。
max-w-full: 此類用於將元素寬度指定為 max-width: 100%。
max-w-min: 此類用於將元素寬度指定為 max-width: min-content。
max-w-max: 此類用於將元素寬度指定為 max-width: max-content。
max-w-prose: 此類用於將元素寬度指定為 max-width: 65ch。
max-w-screen-sm: 此類用於將元素寬度指定為 max-width: 640px。
max-w-screen-md: 此類用於將元素寬度指定為 max-width: 768px。
max-w-screen-lg: 此類用於將元素寬度指定為 max-width: 1024px。
max-w-screen-xl: 此類用於將元素寬度指定為 max-width: 1280px。
max-w-screen-2xl: 此類用於將元素寬度指定為 max-width: 1536px。

Tailwind CSS 最大寬度類示例

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

設定最大寬度

我們多次使用 CSS maximum-width 屬性，在這裡我們也可以透過使用上述類來實現。

示例

在此示例中，我們將建立三個元素，並使用上述類設定不同的最大寬度。

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

<body class="p-4">
    <h2 class="text-2xl mb-3">
        Tailwind CSS max-width Class
    </h2>
    <div class="max-w-48 inline-block 
                bg-green-400 h-12 rounded-lg p-2.5 m-2">
        This box has max-w-48
    </div>
    <br>
    <div class="max-w-56 inline-block 
                bg-green-400 h-auto rounded-lg p-2.5 m-2">
        This box has a max-w-56 class.
    </div>
    <br>
    <div class=" max-w-64 inline-block bg-green-400 
                h-auto rounded-lg p-2.5 m-2 justify-text">
        This box has a min-w-64. 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 max-width Class
    </h2>
    <div class="max-w-96 inline-block hover:max-w-24
                bg-green-400 h-auto rounded-lg p-2.5 m-2">
        Hover over me
    </div>
</body>

</html>

列印頁面