TypographyTab Size
Behind the Scenes 🎉

Tab Size

Set the width of horizontal tab characters.

Widely available

This feature is well established and works across many devices and browser versions.

Chrome
Edge
Firefox
Safari

Usage

2

This text is indented with a tab character.
<section class="bg-black">
    <pre class="fs-md ts-2">This text is indented with a tab character.</pre>
</section>

4

This text is indented with a tab character.
<section class="bg-black">
    <pre class="fs-md ts-4">This text is indented with a tab character</pre>
</section>

8

This text is indented with a tab character.
<section class="bg-black">
    <pre class="fs-md ts-8">This text is indented with a tab character.</pre>
</section>

Responsive Design

Use breakpoint prefixes to target different screen sizes. Styles apply from the breakpoint & up.

Target viewport sizes with breakpoint prefixes.

sm:ts-[value]
Small≥640px
md:ts-[value]
Medium≥768px
lg:ts-[value]
Large≥1024px
xxl:ts-[value]
Extra Large≥1536px

Hover State

Apply styles conditionally on hover using the h: prefix.

Add the h: prefix to apply styles only when the user hovers over the element.

Syntax:h:ts-[value]