Tab size

import { ApiTable } from "@/components/api-table.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx";

export const title = "tab-size"; export const description = "Utilities for controlling the size of tab characters.";

", "tab-size: \;"], ["tab-(\)", "tab-size: var(\);"], ["tab-[\]", "tab-size: \;"], ]} />

Examples

Basic example

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

tab-2 {/* prettier-ignore */}

function indent() {
    return 'tabbed';
}

tab-8 {/* prettier-ignore */}

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>

Using a custom value

Responsive design