尺寸
用于设置元素的最小宽度的工具。
¥Basic usage
¥Setting the minimum width
使用 min-w-*
工具设置元素的最小宽度。
¥Set the minimum width of an element using min-w-*
utilities.
<div class="w-96 ...">
<div class="min-w-80 ...">min-w-80</div>
<div class="min-w-64 ...">min-w-64</div>
<div class="min-w-48 ...">min-w-48</div>
<div class="min-w-40 ...">min-w-40</div>
<div class="min-w-32 ...">min-w-32</div>
<div class="min-w-24 ...">min-w-24</div>
<div class="min-w-full ...">min-w-full</div>
</div>
Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:min-w-0
to only apply the min-w-0
utility on hover.
<div class="w-24 min-w-full hover:min-w-0">
<!-- ... -->
</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:min-w-0
to apply the min-w-0
utility at only medium screen sizes and above.
<div class="w-24 min-w-full md:min-w-0">
<!-- ... -->
</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 minimum 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',
}
}
}
}
要单独自定义 min-width
,请使用 tailwind.config.js
文件的 theme.minWidth
部分。
¥To customize min-width
separately, use the theme.minWidth
section of your tailwind.config.js
file.
module.exports = {
theme: {
extend: {
minWidth: {
'128': '32rem',
}
}
}
}
在 主题定制 文档中了解有关自定义默认主题的更多信息。
¥Learn more about customizing the default theme in the theme customization documentation.
¥Arbitrary values
If you need to use a one-off min-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="min-w-[220px]">
<!-- ... -->
</div>
Learn more about arbitrary value support in the arbitrary values documentation.