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-", "text-indent: calc(var(--spacing) * )"], ["-indent-", "text-indent: calc(var(--spacing) * -)"], ["indent-px", "text-indent: 1px;"], ["-indent-px", "text-indent: -1px;"], ["indent-()", "text-indent: var();"], ["indent-[]", "text-indent: ;"], ]} />
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:
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.
}<!-- [!code classes:indent-8] -->
<p class="indent-8">So I started to walk into the water...</p>To use a negative text indent value, prefix the class name with a dash to convert it to a negative value:
{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.
}<!-- [!code classes:-indent-8] -->
<p class="-indent-8">So I started to walk into the water...</p>