Vue

2022.01.06

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


碰到的問題

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

歡迎給我點鼓勵,讓我知道你來過 :)

guest

0 則留言
Inline Feedbacks
View all comments
Copyright (C) MUKI space* / Reborn Theme All Rights Reserved.