Typography
用於控制區塊內文字前方空白間距的通用類別。
| Class | Styles |
|---|---|
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-2 和 indent-8 等 indent-<number> 通用類別來設定區塊內文字前方的空白間距（縮排）：
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.
<p class="indent-8">So I started to walk into the water...</p>要使用負數的文字縮排值，請在類別名稱前加上破折號將其轉換為負值：
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.
<p class="-indent-8">So I started to walk into the water...</p>使用 indent-[<value>] 語法，根據完全自訂的值來設定 text indentation：
<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() 函式。
在 text-indent 通用類別前面加上像 md: 這樣的中斷點變體，讓該通用類別只在中型螢幕尺寸及以上時套用：
<p class="indent-4 md:indent-8 ..."> Lorem ipsum dolor sit amet...</p>在變體文件中了解更多關於使用變體的資訊。