用 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 沒有作用的問題囉。

想對你說 (ノ>ω<)ノ

感謝您閱讀到最後,對文章有任何疑問歡迎留言給我,我會盡快回覆。

Faceook / 不定時分享前端資訊與新知,歡迎追蹤!

 

如果這篇文章對您有幫助,請幫我點擊下方的廣告,讓我有更多的動力寫寫寫 (๑•̀ㅂ•́)و✧

guest
0 則留言
Inline Feedbacks
View all comments
粉絲團