公眾號關注?“太空編程”

設為 “星標”，帶你了解硬核的編程知識！

眾所周知，Tailwind CSS框架越來越流行，所以我決定嘗試學習并使用Tailwind CSS來搭建一個項目模板，一方面自己深入學習下，二來幫助新人更快地上手Tailwind CSS開發。

創建一個React項目

通過使用create-react-app命令創建一個新的React項目

npx?create-react-app?cra-tailwind-template cd?cra-tailwind-template

如果沒有安裝過create-react-app包，會先安裝包，輸入yes直接安裝

這樣就成功創建了一個React項目模板，并進入到項目根目錄

安裝Tailwind CSS

通過以下命令執行安裝

npm?install?tailwindcss@npm:@tailwindcss/postcss7-compat?@tailwindcss/postcss7-compat?postcss@^7?autoprefixer@^9

配置Craco

Craco是一個為你創建的React項目而使用的簡易的配置成層。

通過在應用程序的根目錄中添加craco.config.js文件，即可給eslint，babel，postcss等添加自定義配置，這樣可以統一集中化管理所有的配置。

npm?install?@craco/craco

安裝好之后，編輯項目中package.json文件scripts部分

"scripts":?{"start":?"craco?start","build":?"craco?build","test":?"craco?test","eject":?"react-scripts?eject" },

接下來，我們需要在項目根目錄手動創建一個craco.config.js文件，并且添加tailwind和autoprefix作為PostCSS插件

module.exports?=?{style:?{postcss:?{plugins:?[require('tailwindcss'),require('autoprefixer'),],},}, }

創建配置文件

接著正式在項目中引入tailwind CSS框架，通過以下命令創建tailwind.config.js文件

npx?tailwind?init

創建好的文件位于項目的根目錄下

編輯tailwind.config.js文件

下面，我們需要對tailwind.config.js文件進行編輯，將配置里purge項根據模板的路徑，這樣避免沒有使用到的樣式編譯進生產環境的代碼中

module.exports?=?{purge:?['./src/**/*.{js,jsx,ts,tsx}',?'./public/index.html'],darkMode:?false,?theme:?{extend:?{},},variants:?{extend:?{},},plugins:?[], }

將Tailwind引入到CSS中

打開src/index.css文件，使用@tailwind命令來使用

@tailwind?base; @tailwind?components; @tailwind?utilities;

最后將index.css引入到你的src/index.js文件中

import?React?from?'react'; import?ReactDOM?from?'react-dom'; import?'./index.css';?//?include?index.css import?App?from?'./App'; import?reportWebVitals?from?'./reportWebVitals';ReactDOM.render(<React.StrictMode><App?/></React.StrictMode>,document.getElementById('root') );

到此，所有的配置結束了，我們可以在模板或頁面文件中使用Tailwind CSS代碼了。

---

總結

以上是生活随笔為你收集整理的使用React和Tailwind CSS搭建项目模板的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。