2022-05-03
VUE3 做原生的 HTML5 表單驗證
JavaScript
2022.01.06
假設想把 TailwindCSS 的 class 改用變數顯示：
<span class="font-bold" :class="'text-' + item.color + '-500'">+28%</span>
npm run dev 之後，會發現這個 class 沒有作用，簡單來說跟渲染的順序有關，Tailwind CSS 以為這些 class 沒有用到就把它刪除了。
解決方法是把相關的 class 加到 safelist 清單下，打開 tailwind.config.js 後，輸入以下語法 (我用的是 TailwindCSS 3.0，如果你用的是 2.0，寫法會不太一樣，可以參考 TailwindCSS 2.0 的文件。)
module.exports = {
safelist: [
'text-pink-500',
'text-indigo-500'
]
}以上。
如此就可以解決變數 class 沒有作用的問題囉。
