笙亿网络策划

Tailwind CSS max-width 怎么设置最大宽度？

约 11 分钟读完 57 阅
文章导读
Previous Quiz Next Tailwind CSS 的 max-width 是一个 utility class，它提供了一种有效的方式来处理内容的 max-width。此类用于设置或操纵任何 HTML 元素的 max-width。
📋 目录
  1. Ⅰ Tailwind CSS Max-Width Classes
  2. Ⅱ Tailwind CSS Max-Width 类别的功能
  3. Ⅲ Tailwind CSS Max-Width 类别的示例
  4. Ⅳ 设置最大宽度
  5. Ⅴ 条件最大宽度
A A

Tailwind CSS - Max-Width

Previous
Quiz
Next

Tailwind CSS 的 max-width 是一个 utility class，它提供了一种有效的方式来处理内容的 max-width。此类用于设置或操纵任何 HTML 元素的 max-width。

Tailwind CSS Max-Width Classes

以下是Tailwind CSS max-width 类的列表，这些类提供了有效处理内容最大宽度的途径。

Class CSS Properties
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-Width 类别的功能

  • max-w-0: 该 class 用于将元素的宽度指定为 max-width: 0rem。
  • max-w-none: 该 class 用于将元素的宽度指定为 max-width: none。
  • max-w-xs: 该 class 用于将元素的宽度指定为 max-width: 20rem。
  • max-w-sm: 该 class 用于将元素的宽度指定为 max-width: 24rem。
  • max-w-md: 该 class 用于将元素的宽度指定为 max-width: 28rem。
  • max-w-lg: 该 class 用于将元素的宽度指定为 max-width: 32rem。
  • max-w-xl: 该 class 用于将元素的宽度指定为 max-width: 36rem。
  • max-w-2xl: 该 class 用于将元素的宽度指定为 max-width: 42rem。
  • max-w-3xl: 该 class 用于将元素的宽度指定为 max-width: 48rem。
  • max-w-4xl: 该 class 用于将元素的宽度指定为 max-width: 56rem。
  • max-w-5xl: 该 class 用于将元素的宽度指定为 max-width: 64rem。
  • max-w-6xl: 该 class 用于将元素的宽度指定为 max-width: 72rem。
  • max-w-7xl: 该 class 用于将元素的宽度指定为 max-width: 80rem。
  • max-w-full: 该 class 用于将元素的宽度指定为 max-width: 100%。
  • max-w-min: 该 class 用于将元素的宽度指定为 max-width: min-content。
  • max-w-max: 该 class 用于将元素的宽度指定为 max-width: max-content。
  • max-w-prose: 该 class 用于将元素的宽度指定为 max-width: 65ch。
  • max-w-screen-sm: 该 class 用于将元素的宽度指定为 max-width: 640px。
  • max-w-screen-md: 该 class 用于将元素的宽度指定为 max-width: 768px。
  • max-w-screen-lg: 该 class 用于将元素的宽度指定为 max-width: 1024px。
  • max-w-screen-xl: 该 class 用于将元素的宽度指定为 max-width: 1280px。
  • max-w-screen-2xl: 该 class 用于将元素的宽度指定为 max-width: 1536px。

Tailwind CSS Max-Width 类别的示例

以下示例将演示 Tailwind CSS max-width class 的实用功能。

设置最大宽度

我们经常使用 CSS 的 maximum-width 属性，这里也可以通过使用上述提到的 class 来实现。

示例

在本示例中，我们将创建三个元素，并使用上述提到的 class 为它们设置不同的最大宽度。

<!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 或屏幕尺寸等条件来改变最大宽度值。要为任何元素的 maximum width 设置条件，我们可以使用 `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>