Max-Width 最大宽度
设置元素最大宽度的实用工具。
| Class | Properties |
|---|
基本用法
设置最大宽度
使用 max-w-* 实用工具设置元素的最大宽度。
<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>调整大尺寸元素
在 24rem 以上， max-w-* 实用程序使用命名比例而不是数字比例，以使值更容易猜测。
<div class="max-w-md ...">
<!-- ... -->
</div>阅读宽度
max-w-prose 实用程序为元素提供了一个针对可读性进行优化的最大宽度，并根据字体大小进行调整。
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.
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.
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.
<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>限制到您的断点
max-w-screen-{breakpoint} 类可以用来为元素设置与特定断点匹配的最大宽度。这些值是从您的 tailwind.config.js 文件的 theme.screens 部分自动生成的。
<div class="max-w-screen-2xl">
<!-- ... -->
</div>有条件地应用
悬停，焦点和其他状态
Tailwind 允许您使用变体修饰符在不同状态下有条件地应用实用程序类。例如，使用 hover:max-w-lg 仅在悬停时应用 max-w-lg 实用程序。
<div class="max-w-sm hover:max-w-lg">
<!-- ... -->
</div>要了解更多信息，请查看有关响应式设计、深色模式和其他媒体查询修改器的文档。
断点和媒体查询
您还可以使用变体修饰符来针对响应式断点、深色模式、prefers-reduced-motion 等媒体查询进行定位。例如，使用 md:max-w-lg 仅在中等屏幕尺寸及以上应用 max-w-lg 实用程序。
<div class="max-w-sm md:max-w-lg">
<!-- ... -->
</div>要了解更多信息，请查看有关响应式设计、深色模式和其他媒体查询修改器的文档。
使用自定义值
定制您的主题
默认情况下，Tailwind 的最大宽度比例是默认间距比例和一些特定于宽度的额外值的组合。
您可以通过编辑您的 tailwind.config.js 文件中的 theme.spacing 或 theme.extend.spacing 来自定义您的间距比例尺。
module.exports = {
theme: {
extend: {
spacing: {
'128': '32rem',
}
}
}
}要分别自定义 max-width ，请使用您的 tailwind.config.js 文件的 theme.maxWidth 部分。
module.exports = {
theme: {
extend: {
maxWidth: {
'128': '32rem',
}
}
}
}任意值
如果您需要使用一个与主题无关的 max-width 值，可以使用方括号来根据任意值动态生成属性。
<div class="max-w-[220px]">
<!-- ... -->
</div>了解有关任意值支持的更多信息，请参阅任意值文档。