本次系列文 CSS 框架會介紹 tailwind 和私心推薦的 unocss，unocss 的相關文章目前還不多，等鐵人賽完成後會再找時間撰寫教學文章（其實使用起來非常簡單），除此之外 unocss 的製作者 AnthonyFu 也是 Vue 的開發核心成員之一，不太用擔心支援度。

Tailwind

相信有不少人已經開始使用，不多介紹直接說明安裝流程：

1. 安裝指令(包含相關套件）：

npm install --save-dev @nuxtjs/tailwindcss

2. 修改 nuxt.config 設定：

export default {
  modules: ['@nuxtjs/tailwindcss']
}

3. 產生 tailwind 設定檔（tailwind.config.js）：

npx tailwindcss init

4. tailwind 的設定檔會放在以下兩個路徑：

• ./assets/css/tailwind.css (用來寫 @layer, @component, @utilities)
• ./tailwind.config.{js,ts}

5. 如果使用 TypeScript，在 tailwind.config.ts 裡面可以引入 Config 的 type 來避免跳出警告錯誤。

import { Config } from 'tailwindcss'
export default <Config> {
  theme: {
    extend: {}
  },
}

參考文件 - NuxtTailwind

UnoCSS

安裝方式非常簡單：

1. 安裝指令：

npm i -D @unocss/nuxt

2. 修改 nuxt.config

export default {
  modules: [
    '@unocss/nuxt',
  ],
}

3. 相關設定雖然可以寫在 nuxt.config 中，但還是建議另外新增 unocss.config.js(ts) 來設定。

參考文件 - @unocss/nuxt

vue-gtag

導入數據分析也是常見的需求。

1. 安裝指令：

npm i -D vue-gtag-next

2. 在 pligins 資料夾內新增檔案 vue-gtag.client.js (如果沒有 plugins 資料夾請先自行建立)
3. 修改 vue-gtag.client.js

import VueGtag from 'vue-gtag-next'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueGtag, {
    property: {
      id: '你的 google 分析追蹤碼'
    }
  })
})

參考文件 - Nuxt3 plugins