在文字前後實作 Quote | 點燈坊

若想在文字前後實作 Quote，傳統會使用 :before 與 :after 處理，Tailwind CSS 則會使用實體 Element 實現。

Version

Tailwind CSS 2.1.1

Quote

Stay Hungry, Stay Foolish 前後產生 quote 符號。

<template>
  <blockquote>
    <span class="text-red-500">&#8220;</span>
    Stay Hungry, Stay Foolish
    <span class="text-red-500">&#8221;</span>
  </blockquote>
</template>

第 3 行

<span class="text-red-500">&#8220;</span>

設定前 quote style：

• text-red-500：設定 quote 顏色

第 5 行

<span class="text-red-500">&#8221;</span>

設定後 quote style：

• text-red-500：設定 quote 顏色

Conclusion

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