第一步執行命令安裝
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
第二步創建配置文件
npx tailwindcss init
然後根目錄下就有一個文件tailwind.config.js,裏面顯示這樣的代碼, 這是一個最小的配置文件,你可以在這個文件裏面定製你的Tainwind css ,如果你不想定製,直接保持默認的就好
第三步在根目錄下新建postcss.config.js文件,裏面代碼如下
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
第四步:在main.js中引入tainwind css
然後先簡單使用看看看看樣式是否有變化
<h1 class="font-semibold text-4xl text-purple-700">vue2</h1>
恭喜你成功了,開始使用吧