vue2中使用TailWind Css

第一步執行命令安裝

npm install -D [email protected]:@tailwindcss/postcss7-compat [email protected]^7 [email protected]^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>

 

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章