我也是看了好多教程狐粱,也嘗試配置睬棚,但都沒(méi)效過(guò)炒嘲,后來(lái)還是根據(jù)官網(wǎng)的方法成功了
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
image.png
按照上述安裝會(huì)報(bào)錯(cuò)但不要緊轴或,如果出現(xiàn)Error: PostCSS plugin tailwindcss requires PostCSS 8.則是版本不兼容下面會(huì)講越平,postcss.config.js這一步可以不用频蛔,他就是導(dǎo)出了那兩個(gè)模塊(在vue.config.js中配置下圖即可)
image.png
繼續(xù)往下走按照官網(wǎng)安裝
image.png
安裝完終端如果出錯(cuò)點(diǎn)進(jìn)去
image.png
替換成
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
main.js中引入
import "tailwindcss/tailwind.css"
版本不兼容直接重新安裝低版本即可
npm uninstall tailwindcss postcss autoprefixer
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9