2023-01-16
Vue3 使用 Vite 整合 axios 攔截器與 axios proxy
Vue
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
沒有作用的問題囉。