用 Vue TailwindCSS 時,變數 class 沒有作用

問題

假設想把 TailwindCSS 的 class 改用變數顯示:

HTML

npm run dev 之後,會發現這個 class 沒有作用,簡單來說跟渲染的順序有關,Tailwind CSS 以為這些 class 沒有用到就把它刪除了。

解決方法

解決方法是把相關的 class 加到 safelist 清單下,打開 tailwind.config.js 後,輸入以下語法 (我用的是 TailwindCSS 3.0,如果你用的是 2.0,寫法會不太一樣,可以參考 TailwindCSS 2.0 的文件。)

JS

以上。

如此就可以解決變數 class 沒有作用的問題囉。