tab-size
Sets the width of the tab character (\t). Primarily used to control tab spacing in <pre> and <code> blocks.
Class List
Pattern: tbs{value}{unit} (using a number without unit means number of spaces)
| Class | CSS | Description |
|---|---|---|
tbs2 | tab-size: 2 | Tab = 2 spaces |
tbs4 | tab-size: 4 | Tab = 4 spaces (common) |
tbs8 | tab-size: 8 | Tab = 8 spaces (browser default) |
tbs2rem | tab-size: 2rem | Tab = 20px width |
tbs4rem | tab-size: 4rem | Tab = 40px width |
Visual Demo
All three blocks contain exactly the same text, indented with real tab characters. Only the tab width differs, so you can compare directly how the same code reads at each value.
tbs2
function greet(name) {
if (!name) {
return 'hello';
}
return 'hello ' + name;
}tbs4
function greet(name) {
if (!name) {
return 'hello';
}
return 'hello ' + name;
}tbs2rem
function greet(name) {
if (!name) {
return 'hello';
}
return 'hello ' + name;
}The larger the value, the further nested lines drift right. This is also where you can judge whether narrow screens will need horizontal scrolling.
Usage Examples
<!-- Tab 2 spaces in code block -->
<pre class="tbs2 bg18181B p2rem br8px fs14px">
function hello() {
const msg = "world";
return msg;
}
</pre>
<!-- Tab 4 spaces in code block -->
<pre class="tbs4 bg18181B p2rem br8px fs14px">
function hello() {
const msg = "world";
return msg;
}
</pre>
<!-- Specify exact width in rem units -->
<code class="tbs2rem wspw">Tab characters are displayed with 20px width</code>Class Details
tbs2tab-size: 2
Renders one tab as two spaces wide. Good for tight spots such as narrow code cards in documentation or sidebar snippets.
<!-- Compact code sample inside a docs card -->
<pre class="tbs2 bg18181B p2rem br8px fs13px oxa">
<code>const config = {
retries: 3,
timeout: 500
};</code>
</pre>tbs4tab-size: 4
Renders one tab as four spaces wide. It matches what most style guides assume, making it the safe default for tab-indented sources.
<!-- Matches the four-space convention most style guides assume -->
<pre class="tbs4 bg18181B p2rem br8px fs14px oxa">
<code>def handler(event):
if event.ok:
return 200
return 500</code>
</pre>tbs8tab-size: 8
Eight, the same as the browser default. Use it explicitly to restore the original width when a parent has set something else.
<!-- Browser default; state it explicitly when overriding a parent -->
<pre class="tbs8 bg18181B p2rem br8px fs14px oxa">
<code>MAKEFILE:
echo "tabs are meaningful here"</code>
</pre>tbs2remtbs4remtab-size: length
Fixes the tab width as a length rather than a character count. Because it does not depend on the font, it suits logs and tables where columns must line up exactly.
<!-- Fixed visual width instead of a character count -->
<pre class="tbs2rem bg18181B p2rem br8px fs14px oxa">
<code>col1 col2 col3
a bb ccc</code>
</pre>
<!-- Wider stops for deeply nested output -->
<pre class="tbs4rem bg18181B p2rem br8px fs14px oxa">
<code>root child leaf</code>
</pre>Practical Example — Log Viewer
A panel showing tab-separated log columns in a narrow space. A small tab width keeps lines from wrapping or overflowing.
<!-- Log and diff viewer: tabs stay narrow so lines fit -->
<section class="bg18181B b1pxsolid27272A br8px oh">
<header class="df jcsb aic py12px px16px bb1pxsolid27272A">
<span class="fs13px fw600 cFAFAFA">server.log</span>
<span class="fs12px c71717A">tab-size 2</span>
</header>
<pre class="tbs2 wsp oxa p16px fs13px c71717A lh1-6">
<code>12:04:11 INFO request accepted
12:04:11 WARN retry scheduled
12:04:12 ERROR upstream timeout</code>
</pre>
</section>Tips / Caveats
It only affects real tab characters
The property changes the width of a tab character and nothing else. If the source is indented with spaces, no value will change anything. Check what the indentation is made of first.
Visible only where whitespace is preserved
In ordinary paragraphs a tab collapses to a single space, so the effect disappears. It matters only inside elements that preserve whitespace.
Numbers and lengths are measured differently
A number counts spaces, so the real width shifts when the font does. A length stays fixed regardless of the font, which is safer when column alignment matters.
Copied code keeps its original indentation
Only the rendered width changes; the characters do not. When a user copies the code the tabs come along, so it will look different again depending on their editor settings.
Only works in pre/code
tab-size only works on elements where white-space is pre or pre-wrap. In normal text, tab characters are collapsed to spaces.