章節連結
由於 TailwindCSS 4 已經取消內建 SCSS / SASS …… 等編譯器，連帶導致 @apply 的用法也無法使用，也不認得 .scss 之類的附檔名，近期也沒有加回支援的打算。因此筆記下在新版的 TailwindCSS 4 如何在 Vue3 中與 SCSS 並存。
內容
Tailwindcss 4
直接使用 .css 附檔名引入，並搭配官方出的 vite 套件一同使用。若你是使用 Nuxt，那就額外全域引入一支 .css 檔
SCSS
安裝 @tailwindcss/postcss 和 postcss 套件，詳情可見官網
Vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<style scoped> /* for using tailwindcss v4*/ @reference "@/assets/base.css"; .text-class { @apply text-gray-700; } </style> <style scoped lang="scss"> /* for scss */ h1 { span { color: red; } } </style> |
參考資料
1. Migration tool doesn’t recognize .scss files
2. @applyBroken in Tailwind CSS v4.0 – No Clear Fix or Docs!
