[筆記] Tailwind CSS Safelist 設定 @地瓜大的飛翔旅程

章節連結

內容
參考資料

這邊筆記下若用 Vue3 搭配 TailwindCSS 使用時，若用動態傳值來指定的 class – 像是顏色代碼，那你會發現沒有作用。因為 TailwindCSS 在初始化時，會無法讀取動態的 class 值，進而沒有效果。這邊筆記下解決方法 Tailwind CSS safelist。

內容

在 tailwind.config.js <ts> 中，safelist 下，把這些會動態載入的值先行寫入，像是以下這樣：

module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),
  ],
  safelist: [
    'hover:text-[#283FFF]',
    'hover:text-[#3799CC]',
    'hover:text-[#279CDC]',
    'hover:text-[#189193]',
    'hover:text-[#FCC100]',
    'hover:text-[#257DD6]',
    'focus:border-[#2196f3]',
    'focus:ring-[#2196f3]',
  ],
}