Copyright © 2008 ~ 2024 MUKI space* / omegaBook theme All Rights Reserved.

前情提要

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

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

3
Subscribe
Notify of
guest

7 則留言
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Tracy
Tracy
2 years 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
2 years ago
Reply to  mukiwu

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

再次謝謝妳~

ivan
ivan
1 year ago

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

shelly
shelly
1 year ago

您好:請問還是會有Syntax Error: Error: PostCSS plugin autoprefixer requires PostCSS 8.
問題該如何解決?
如果使用
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
就無法使用tailwind3