最大宽度

​基本用法

¥Basic usage

​设置最大宽度

¥Setting the maximum width

使用 max-w-* 工具设置元素的最大宽度。

¥Set the maximum width of an element using the max-w-* utilities.

<div>
  <div class="w-full max-w-96 ...">max-w-96</div>
  <div class="w-full max-w-80 ...">max-w-80</div>
  <div class="w-full max-w-64 ...">max-w-64</div>
  <div class="w-full max-w-48 ...">max-w-48</div>
  <div class="w-full max-w-40 ...">max-w-40</div>
  <div class="w-full max-w-32 ...">max-w-32</div>
  <div class="w-full max-w-24 ...">max-w-24</div>
</div>

​调整大元素的大小

¥Sizing large elements

在 24rem 之上，max-w-* 工具使用命名比例而不是数字比例，以使值更容易猜测。

¥Above 24rem, the max-w-* utilities use a named scale instead of a numeric scale to make the values easier to guess.

Andrew Alfred

Assistant to the Traveling Secretary

<div class="max-w-md ...">
  <!-- ... -->
</div>

​阅读宽度

¥Reading width

max-w-prose 工具为元素提供了针对可读性优化的最大宽度，并根据字体大小进行调整。

¥The max-w-prose utility gives an element a max-width optimized for readability and adapts based on the font size.

<div class="text-sm max-w-prose ...">
  <p>Oh yeah. It's the best part. It's crunchy, it's explosive, it's where the muffin breaks free of the pan and sort of does it's own thing. I'll tell you. That's a million dollar idea right there. Just sell the tops.</p>
</div>

<div class="text-base max-w-prose ...">
  <p>Oh yeah. It's the best part. It's crunchy, it's explosive, it's where the muffin breaks free of the pan and sort of does it's own thing. I'll tell you. That's a million dollar idea right there. Just sell the tops.</p>
</div>

<div class="text-xl max-w-prose ...">
  <p>Oh yeah. It's the best part. It's crunchy, it's explosive, it's where the muffin breaks free of the pan and sort of does it's own thing. I'll tell you. That's a million dollar idea right there. Just sell the tops.</p>
</div>

​限制到你的断点

¥Constraining to your breakpoints

max-w-screen-* 类可用于为元素提供匹配特定断点的最大宽度。这些值自动派生自 tailwind.config.js 文件的 theme.screens section。

¥The max-w-screen-* classes can be used to give an element a max-width matching a specific breakpoint. These values are automatically derived from the theme.screens section of your tailwind.config.js file.

<div class="max-w-screen-2xl">
  <!-- ... -->
</div>

​有条件地应用

​悬停、聚焦和其他状态

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:max-w-lg to only apply the max-w-lg utility on hover.

<div class="max-w-sm hover:max-w-lg">
  <!-- ... -->
</div>

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

​断点和媒体查询

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:max-w-lg to apply the max-w-lg utility at only medium screen sizes and above.

<div class="max-w-sm md:max-w-lg">
  <!-- ... -->
</div>

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.

​使用自定义值

¥Using custom values

​自定义主题

¥Customizing your theme

默认情况下，Tailwind 的最大宽度比例是 默认间距比例 以及一些特定于宽度的附加值的组合。

¥By default, Tailwind’s maximum width scale is a combination of the default spacing scale as well as some additional values specific to widths.

你可以通过编辑 tailwind.config.js 文件中的 theme.spacing 或 theme.extend.spacing 来自定义间距比例。

¥You can customize your spacing scale by editing theme.spacing or theme.extend.spacing in your tailwind.config.js file.

module.exports = {
  theme: {
    extend: {
      spacing: {
        '128': '32rem',
      }
    }
  }
}

要单独自定义 max-width，请使用 tailwind.config.js 文件的 theme.maxWidth 部分。

¥To customize max-width separately, use the theme.maxWidth section of your tailwind.config.js file.

module.exports = {
  theme: {
    extend: {
      maxWidth: {
        '128': '32rem',
      }
    }
  }
}

​任意值

¥Arbitrary values

If you need to use a one-off max-width value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.

<div class="max-w-[220px]">
  <!-- ... -->
</div>

Learn more about arbitrary value support in the arbitrary values documentation.