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 } 很重要,沒有寫他就不會去抓相關檔案!