使用 TailwindCSS 處理 Global CSS

雖然在 Vue 儘量在 Component 內使用 Scoped CSS 避免 CSS 互相影響，但若各 Component 都套用，還是無法避免使用 Global CSS，原本 Vue 有多種方式使用 Global CSS，若使用 TailwindCSS 則有不同方式。

Version

Vue 2.6.11
TailwindCSS 1.6.0

src/assets/css/tailwind.css

@tailwind base;
@tailwind components;

.face-fontsize {
  font-size: 1.1rem !important;
}

@tailwind utilities;

face-fontsize 為 global css，在 Tailwind 可寫在 tailwind.css 的 components 與 utilities 之間。

global002

global001

寫在 tailwind.css 內的 class，在 intellisense 都可以抓到。

global000

在 Dev Tools 可發現 global css 套用成功。