改變 li 圖示 | 點燈坊

若想改變 <li> 圖示，傳統會使用 li:before 處理，Tailwind CSS 則會使用實體 Element 實現。

Version

Tailwind CSS 2.1.1

li

<li> 之前的圖示已改用 * 表示。

<template>
  <ul class="list-none">
    <li><span class="text-red-500 mr-1">&#8727;</span>SEO</li>
    <li><span class="text-red-500 mr-1">&#8727;</span>SPA</li>
    <li><span class="text-red-500 mr-1">&#8727;</span>Serverless</li>
  </ul>
</template>

第 2 行

<ul class="list-none">

設定父層 <ul> style：

• list-none：即將以 * 取代 <li> 預設圖示，因此使用 list-style 取消 <li> 預設 style

第 3 行

<li><span class="text-red-500 mr-1">&#8727;</span>SEO</li>

以 ∗ 顯示 *。

設定子層 * style：

• text-red-500：設定 * 顏色
• mr-1：設定 * right margin

Conclusion

• 傳統會使用 :before 或 :after 處理 <li> 圖示，但由於 :before 或 :after 都在 CSS selector 內處理，這明顯與 Tailwind CSS 都在 HTML 處理風格不符
• Tailwind CSS 會將 :before 明確寫在 element 之前，而 :after 則明確寫在 element 之後，這也是為什麼 Tailwind CSS 沒有為 :before 與 :after 提供相對應 utility 主因