vue2中使用TailWind Css

第一步執行命令安裝

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>

 

 恭喜你成功了，開始使用吧