Usage

<p class="ti-0 ...">Text Indent 0</p>
<p class="ti-1 ...">Text Indent 1</p>
<p class="ti-2 ...">Text Indent 2</p>
<p class="ti-3 ...">Text Indent 3</p>
<p class="ti-4 ...">Text Indent 4</p>

Responsiveness

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

Target viewport sizes with breakpoint prefixes.

sm:ti-*
Small≥640px
md:ti-*
Medium≥768px
lg:ti-*
Large≥1024px
xxl:ti-*
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:ti-*

Negative Values

Use negative variants to translate in the opposite direction.

Use the -- syntax to apply negative numeric values.

Syntax:ti--*