Tailwind CSS 最大宽度

Tailwind CSS 是一个高度可定制且适用于任何项目的 CSS 框架。其中最大宽度是其中一个非常有用的配置项，可以让你轻松地定义容器的最大尺寸。

定义最大宽度

Tailwind CSS 中可以使用 max-w-{size} 来定义最大宽度。其中 {size} 可以为以下几种：

• sm：小尺寸，适用于移动设备。
• md：中尺寸，适用于平板电脑和桌面设备。
• lg：大尺寸，适用于宽屏设备。
• xl：更大的尺寸。
• 2xl：最大的尺寸。

例如：

<div class="max-w-md">这个容器最大宽度为 md 尺寸。</div>

自定义最大宽度

如果以上几个尺寸不能满足你的需求，你还可以自定义最大宽度。可以配合使用 max-w-screen-{percentage} 来定义相对于屏幕宽度的最大宽度。例如：

<div class="max-w-screen-3xl">这个容器相对于屏幕宽度最大为 1920px。</div>

也可以自定义一些尺寸，例如：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .max-w-750 {
    max-width: 750px;
  }
}

上面代码定义了一个 .max-w-750 的类，使得容器的最大宽度为 750px。

结论

Tailwind CSS 的最大宽度非常方便，可以快速定义容器的最大尺寸，并且可以自定义最大宽度，非常灵活。