tab-size

示例(Examples)

基本示例(Basic example)

使用 tab-<number> 工具，如 tab-2 和 tab-8，来控制制表符的大小：

🌐 Use tab-<number> utilities like tab-2 and tab-8 to control the size of tab characters:

function indent() {	return 'tabbed';}

function indent() {	return 'tabbed';}

<pre class="tab-2 ...">function indent() {&#10;&#9;return 'tabbed'&#10;}</pre><pre class="tab-8 ...">function indent() {&#10;&#9;return 'tabbed'&#10;}</pre>

使用自定义值(Using a custom value)

使用 tab-[<value>] 语法 根据完全自定义的值设置 tab size：

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

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

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

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

响应式设计(Responsive design)

在 tab-size 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：

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

请参阅 变体文档 详细了解如何使用变体。