2022-05-03
VUE3 做原生的 HTML5 表單驗證
JavaScript
2022.02.09
原本使用 Vue CLI 可以直接用 vue add tailwind 一鍵安裝 Tailwind CSS，但一鍵安裝的 Tailwind 版本是 v2，如果想要安裝 Tailwind v3 在 Vue Cli + Vue3 的話，可以參考以下步驟。
npm install tailwindcss --save-dev
npm install -D tailwindcss postcss autoprefixer
module.exports = {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}打開 postcss.config.js，修改成以下程式碼：
module.exports = {
plugins: {
tailwindcss: {
config: './tailwind.config.js'
},
autoprefixer: {}
}
}打開 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，如果你沒有看到黑底，表示安裝不成功，可以從頭檢視一下步驟，或是留言告訴我喔～
謝謝 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 這項呢？
哇，我之前反而是 v10 會出現錯誤欸 XDD…，那看來應該是 TailwindCSS 有更新可以相容 autoprefixer v10，感謝你的分享，我再來更新一下文章。
另外，如果你自己有習慣用 sass 這樣的預處理器可以選 pre-processor，我自己以前沒有用 Tailwind 時是會使用 pre-processor 的，但這次用了 TailwindCSS 我就沒有選了，就用一般的 CSS ~
謝謝妳～昨天後來決定棄守，改用 vue-cli-plugin-tailwind 套件，跑得算順。
今天決定重裝一次，有成功了～
module.exports = { content: [ “./index.html”, “./src/**/*.{vue,js,ts,jsx,tsx}”, ], }
裡的 { vue } 很重要。
再次謝謝妳～
恭喜你成功 XDDD。
對的，裡面的 { vue } 很重要，沒有寫他就不會去抓相關檔案！