前情提要

原本使用 Vue CLI 可以直接用 vue add tailwind 一鍵安裝 Tailwind CSS，但一鍵安裝的 Tailwind 版本是 v2，如果想要安裝 Tailwind v3 在 Vue Cli + Vue3 的話，可以參考以下步驟。

安裝 Tailwind CSS

npm install tailwindcss --save-dev

安裝相依套件

npm install -D tailwindcss postcss autoprefixer

新增檔案 tailwind.config.js

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

修改 postcss.config.js

打開 postcss.config.js，修改成以下程式碼：

module.exports = {
  plugins: {
    tailwindcss: {
      config: './tailwind.config.js'
    },
    autoprefixer: {}
  }
}

降低 auto prefixer 版本

打開 package.json，搜尋 autoprefixer，我們需要降低他的版本，所以請修改為以下程式碼

"autoprefixer": "^9.0.0",

重新安裝套件

npm install

測試

以上都沒有問題的話，我們就在 vue 裡寫一段 tailwind CSS v3 才有的專屬語法吧

<div class="font-bold text-white bg-neutral-800">Hello World</div>

最後啟動你的 vue 專案，就可以看到「黑底 + 粗體 + 白字」的結果囉！

註：bg-neutral-800 是 tailwind CSS v3 新增的 class，如果你沒有看到黑底，表示安裝不成功，可以從頭檢視一下步驟，或是留言告訴我喔～

3

發生錯誤。