text-indent

ブロック内のテキストの前に表示される空白の量を制御するためのユーティリティ。

クラススタイル

クラス	スタイル
`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>;`

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>;

例

ブロック内のテキストの前に表示される空白の量（インデント）を設定するには、indent-<number> ユーティリティ（indent-2 や indent-8 など）を使用します。

それで、私は水の中を歩き始めました。正直に言うと、私は怖かったです。しかし、私は押し進め、波打ち際を過ぎると、奇妙な静けさが私を包みました。それが神の介入だったのか、すべての生物の親近感だったのかはわかりませんが、ジェリー、その瞬間、私は海洋生物学者でした。

<p class="indent-8">So I started to walk into the water...</p>

負のテキストインデント値を使用するには、クラス名の先頭にダッシュを付けて負の値に変換します。

<p class="-indent-8">So I started to walk into the water...</p>

以下を使用してください indent-[<value>] 構文を設定するにはテキストインデント完全にカスタムの値に基づいて

<p class="indent-[50%] ...">
  Lorem ipsum dolor sit amet...
</p>

CSS変数については、以下も使用できます。 indent-(<custom-property>) 構文

<p class="indent-(--my-indentation) ...">
  Lorem ipsum dolor sit amet...
</p>

これは単なる indent-[var(<custom-property>)] の省略形で、var() 関数を自動的に追加します。

プレフィックスa text-indent ユーティリティを md: のようなブレークポイントバリアントでプレフィックスすると、ユーティリティがmedium 画面サイズ以上でのみ適用されます。

<p class="indent-4 md:indent-8 ...">
  Lorem ipsum dolor sit amet...
</p>

バリアントの使用方法の詳細については、バリアントのドキュメントをご覧ください。