Vue

2022.02.09

Vue CLI 搭配 Vue3 + Tailwind CSS3 開發


前情提要

原本使用 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,我們需要降低他的版本,所以請修改為以下程式碼

2022.03.15 更新

有朋友回饋,autoprefixer 應該是不需要降版了,所以「降低 auto prefixer 版本」跟「重新安裝套件」這兩個步驟可以跳過,不需要改成 v9 喔。有任何問題歡迎留言告知,謝謝!

"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,如果你沒有看到黑底,表示安裝不成功,可以從頭檢視一下步驟,或是留言告訴我喔~

歡迎給我點鼓勵,讓我知道你來過 :)

1
guest

6 則留言
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Tracy
Tracy
6 months ago

謝謝 MUKI~
想知道為什麼 需要這一個步驟:將 autoprefixer 降到 ^9.0.0 版本,因為降下來後反而出現這樣的錯誤。
tailwindcss@3.0.23 requires a peer of autoprefixer@^10.0.2 but none is installed. You must install peer dependencies yourself.

另外,在安裝 Vue-cli 時需不需要選擇 CSS Pre-Processor 這項呢?

Tracy
Tracy
6 months ago
Reply to  mukiwu

謝謝妳~昨天後來決定棄守,改用 vue-cli-plugin-tailwind 套件,跑得算順。
今天決定重裝一次,有成功了~
module.exports = { content: [ “./index.html”, “./src/**/*.{vue,js,ts,jsx,tsx}”, ], }
裡的 { vue } 很重要。

再次謝謝妳~

ivan
ivan
2 months ago

請問在哪裡可以打開 postcss.config.js 這個檔案?

Copyright (C) MUKI space* / Reborn Theme All Rights Reserved.