Typography
用於控制列表標記樣式的通用類別。
| Class | Styles |
|---|---|
list-disc | list-style-type: disc; |
list-decimal | list-style-type: decimal; |
list-none | list-style-type: none; |
list-(<custom-property>) | list-style-type: var(<custom-property>); |
list-[<value>] | list-style-type: <value>; |
使用 list-disc 和 list-decimal 等通用類別來控制列表中標記的樣式：
<ul class="list-disc"> <li>Now this is a story all about how, my life got flipped-turned upside down</li> <!-- ... --></ul><ol class="list-decimal"> <li>Now this is a story all about how, my life got flipped-turned upside down</li> <!-- ... --></ol><ul class="list-none"> <li>Now this is a story all about how, my life got flipped-turned upside down</li> <!-- ... --></ul>使用 list-[<value>] 語法，根據完全自訂的值來設定 marker：
<ol class="list-[upper-roman] ..."> <!-- ... --></ol>對於 CSS 變數，你也可以使用 list-(<custom-property>) 語法：
<ol class="list-(--my-marker) ..."> <!-- ... --></ol>這只是 list-[var(<custom-property>)] 的簡寫形式，會自動為你加上 var() 函式。
在 list-style-type 通用類別前面加上像 md: 這樣的中斷點變體，讓該通用類別只在中型螢幕尺寸及以上時套用：
<ul class="list-none md:list-disc ..."> <!-- ... --></ul>在變體文件中了解更多關於使用變體的資訊。