開局就集成tailwindcss（一）

1.使用cli創建項目

npm create vite@latest 項目名 --template react-ts

 

2.因爲css功底偏弱，所以必須也是完全有必要的，在這裏必須集成一下tailwind css，

npm install tailwindcss autoprefixer postcss-cli
# 額外的安裝2個配套的插件
# autoprefixer  自動添加樣式的前綴，很有必要，類似 --webkit這種，
# postcss-cli 它可以加載不同的插件並對CSS進行各種轉換、優化和處理。

安裝完之後，在根目錄下新建一個postcss.config.js，內容如下

 

3.接下來根據tailwind的官網鏈接 的操作，初始化tailwind

npx tailwindcss init 

 執行之後發現多了一個tailwind.config.js 文件，這還沒結束，配置下規則，支持我們的tsx文件

 這裏偷個懶，直接放到index.css裏，規範點應該提出去，後續再優化，已經迫不及待的要嚐鮮

 

 最後效果如下