Utilities for controlling whether table borders should collapse or be separated.
| State | City |
|---|---|
| Indiana | Indianapolis |
| Ohio | Columbus |
| Michigan | Detroit |
<table class="border-separate border border-green-800 ...">
<thead>
<tr>
<th class="border border-green-600 ...">State</th>
<th class="border border-green-600 ...">City</th>
</tr>
</thead>
<tbody>
<tr>
<td class="border border-green-600 ...">Indiana</td>
<td class="border border-green-600 ...">Indianapolis</td>
</tr>
<tr>
<td class="border border-green-600 ...">Ohio</td>
<td class="border border-green-600 ...">Columbus</td>
</tr>
<tr>
<td class="border border-green-600 ...">Michigan</td>
<td class="border border-green-600 ...">Detroit</td>
</tr>
</tbody>
</table>Use border-collapse to combine adjacent cell borders into a single border when possible. Note that this includes collapsing borders on the top-level <table> tag.
| State | City |
|---|---|
| Indiana | Indianapolis |
| Ohio | Columbus |
| Michigan | Detroit |
<table class="border-collapse border border-green-800 ...">
<thead>
<tr>
<th class="border border-green-600 ...">State</th>
<th class="border border-green-600 ...">City</th>
</tr>
</thead>
<tbody>
<tr>
<td class="border border-green-600 ...">Indiana</td>
<td class="border border-green-600 ...">Indianapolis</td>
</tr>
<tr>
<td class="border border-green-600 ...">Ohio</td>
<td class="border border-green-600 ...">Columbus</td>
</tr>
<tr>
<td class="border border-green-600 ...">Michigan</td>
<td class="border border-green-600 ...">Detroit</td>
</tr>
</tbody>
</table>默認情況下, 只有 響應式 的 border collapse 變化模式 (variants) 會產生。
在 tailwind.config.js 的 variants 區塊中變更 borderCollapse 屬性來決定有哪些變化模式會生成。
舉個例子來說，這個設定將會生成 響應式 和 hover 的變化模式。
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ borderCollapse: ['responsive', 'hover'],
}
}
}如果你不打算在專案中使用 border collapse 功能，可以在你的設定檔裡的 corePlugins 屬性中將 borderCollapse 設定為 false 來停用功能：
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ borderCollapse: false,
}
}