https://benzhub.github.io/tags/vue/Recent content in Vue on BenzHubHugozh-TWThu, 10 Sep 2026 00:00:00 +0000https://benzhub.github.io/post/tailwindcss/041-vue-integration/Thu, 10 Sep 2026 00:00:00 +0000https://benzhub.github.io/post/tailwindcss/041-vue-integration/<blockquote> <p><strong>Vue 整合</strong> 和 React 一樣,把 <strong>TailwindCSS</strong> 用好的關鍵不在「裝進去」,而在「怎麼在元件裡優雅地綁 class」。在 <strong>Vue</strong> + <strong>Vite</strong> 專案裡,<strong>TailwindCSS v4</strong> 只要一個 <code>@tailwindcss/vite</code> plugin 就能裝好;而真正讓 <strong>SFC</strong> 可維護的,是三件事:用 <code>:class</code> 的物件/陣列語法依條件切換樣式、釐清 <code>scoped style</code> 與 Tailwind 的分工,以及記牢在 <code>&lt;style&gt;</code> 用 <code>@apply</code> 前必須先 <code>@reference</code>。這一篇帶你走完安裝、<code>:class</code> 綁定、scoped 共存與 Nuxt 路徑,並拆解動態 class 拼接這個最致命的坑。</p> </blockquote>