Text Indent - Tailwindcss

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

export const title = "text-indent"; export const description = "Utilities for controlling the amount of empty space shown before text in a block.";

<ApiTable rows={[ ["indent-<number>", "text-indent: calc(var(--spacing) * <number>);"], ["-indent-<number>", "text-indent: calc(var(--spacing) * -<number>);"], ["indent-px", "text-indent: 1px;"], ["-indent-px", "text-indent: -1px;"], ["indent-(<custom-property>)", "text-indent: var(<custom-property>);"], ["indent-[<value>]", "text-indent: <value>;"], ]} />

Examples

Basic example

Use indent-<number> utilities like indent-2 and indent-8 to set the amount of empty space (indentation) that's shown before text in a block:

<Figure> <Example> { So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist. } </Example>

html

<!-- [!code classes:indent-8] -->
<p class="indent-8">So I started to walk into the water...</p>

</Figure>

Using negative values

To use a negative text indent value, prefix the class name with a dash to convert it to a negative value:

<Figure> <Example> { So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist. } </Example>

html

<!-- [!code classes:-indent-8] -->
<p class="-indent-8">So I started to walk into the water...</p>

</Figure>

Using a custom value

Responsive design