表格
用于控制表格边框间距的工具。
¥Basic usage
¥Setting the border spacing
使用 border-spacing-*
、border-spacing-x-*
和 border-spacing-y-*
工具来控制带有 单独的边界 的表格单元格边框之间的空间。
¥Use the border-spacing-*
, border-spacing-x-*
, and border-spacing-y-*
utilities to control the space between the borders of table cells with separate borders.
State | City |
---|---|
Indiana | Indianapolis |
Ohio | Columbus |
Michigan | Detroit |
<table class="border-separate border-spacing-2 border border-slate-400 ..."> <thead> <tr> <th class="border border-slate-300 ...">State</th> <th class="border border-slate-300 ...">City</th> </tr> </thead> <tbody> <tr> <td class="border border-slate-300 ...">Indiana</td> <td class="border border-slate-300 ...">Indianapolis</td> </tr> <tr> <td class="border border-slate-300 ...">Ohio</td> <td class="border border-slate-300 ...">Columbus</td> </tr> <tr> <td class="border border-slate-300 ...">Michigan</td> <td class="border border-slate-300 ...">Detroit</td> </tr> </tbody> </table>
<table class="border-separate border-spacing-2 border border-slate-500 ..."> <thead> <tr> <th class="border border-slate-600 ...">State</th> <th class="border border-slate-600 ...">City</th> </tr> </thead> <tbody> <tr> <td class="border border-slate-700 ...">Indiana</td> <td class="border border-slate-700 ...">Indianapolis</td> </tr> <tr> <td class="border border-slate-700 ...">Ohio</td> <td class="border border-slate-700 ...">Columbus</td> </tr> <tr> <td class="border border-slate-700 ...">Michigan</td> <td class="border border-slate-700 ...">Detroit</td> </tr> </tbody> </table>
Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:border-spacing-2
to only apply the border-spacing-2
utility on hover.
<table class="hover:border-spacing-2">
<!-- ... -->
</table>
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:border-spacing-4
to apply the border-spacing-4
utility at only medium screen sizes and above.
<table class="md:border-spacing-4">
<!-- ... -->
</table>
To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.
¥Using custom values
¥Customizing your theme
默认情况下,Tailwind 的边框间距工具使用 默认间距比例。你可以通过编辑 tailwind.config.js
文件中的 theme.spacing
或 theme.extend.spacing
来自定义间距比例。
¥By default, Tailwind’s border spacing utilities use the default spacing scale. 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: {
'13': '3.25rem',
}
}
}
}
或者,你可以通过编辑 tailwind.config.js
文件中的 theme.borderSpacing
或 theme.extend.borderSpacing
来自定义边框间距比例。
¥Alternatively, you can customize just the border spacing scale by editing theme.borderSpacing
or theme.extend.borderSpacing
in your tailwind.config.js
file.
module.exports = {
theme: {
extend: {
borderSpacing: {
'13': '3.25rem',
},
}
}
}
在 主题定制 文档中了解有关自定义默认主题的更多信息。
¥Learn more about customizing the default theme in the theme customization documentation.
¥Arbitrary values
If you need to use a one-off border-spacing
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="border-spacing-[7px]">
<!-- ... -->
</div>
Learn more about arbitrary value support in the arbitrary values documentation.