tab-size

用于控制制表符大小的工具类。

快速参考

类	属性
tab-<number>	tab-size: <number>;
tab-(<custom-property>)	tab-size: var(<custom-property>);
tab-[<value>]	tab-size: <value>;

示例

基础示例

使用 tab-2、tab-8 等 tab-<number> 工具类控制制表符的大小：

tab-2

function indent() {
	return 'tabbed';
}

tab-8

function indent() {
	return 'tabbed';
}

<!-- [!code classes:tab-2,tab-8] -->
<pre class="tab-2 ...">function indent() {&#10;&#9;return 'tabbed'&#10;}</pre>
<pre class="tab-8 ...">function indent() {&#10;&#9;return 'tabbed'&#10;}</pre>

使用自定义值

使用 tab-[<value>] 等工具类，根据完全自定义的值设置制表符大小：

<pre class="tab-[12px] ...">
 <!-- ... -->
</pre>

对于 CSS 变量，也可以使用 tab-(<custom-property>) 语法：

<pre class="tab-(--my-tab-size) ...">
 <!-- ... -->
</pre>

这只是 tab-[var(<custom-property>)] 的简写，会自动为你加上 var() 函数。

响应式设计

使用 md: 等断点变体作为 tab-size 工具类的前缀，即可只在中等屏幕尺寸及以上应用该工具类：

<pre class="tab-4 md:tab-8 ...">
 <!-- ... -->
</pre>

更多关于变体的用法，请参阅变体文档。