眾所周知，Tailwind CSS框架越來(lái)越流行，所以我決定嘗試學(xué)習(xí)并使用Tailwind CSS來(lái)搭建一個(gè)項(xiàng)目模板，一方面自己深入學(xué)習(xí)下，二來(lái)幫助新人更快地上手Tailwind CSS開(kāi)發(fā)。

創(chuàng)建一個(gè)React項(xiàng)目

通過(guò)使用create-react-app命令創(chuàng)建一個(gè)新的React項(xiàng)目

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

如果沒(méi)有安裝過(guò)create-react-app包，會(huì)先安裝包，輸入yes直接安裝

這樣就成功創(chuàng)建了一個(gè)React項(xiàng)目模板，并進(jìn)入到項(xiàng)目根目錄

安裝Tailwind CSS

通過(guò)以下命令執(zhí)行安裝

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

配置Craco

Craco是一個(gè)為你創(chuàng)建的React項(xiàng)目而使用的簡(jiǎn)易的配置成層。

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

npm install @craco/craco

安裝好之后，編輯項(xiàng)目中package.json文件scripts部分

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

接下來(lái)，我們需要在項(xiàng)目根目錄手動(dòng)創(chuàng)建一個(gè)craco.config.js文件，并且添加tailwind和autoprefix作為PostCSS插件

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

創(chuàng)建配置文件

接著正式在項(xiàng)目中引入tailwind CSS框架，通過(guò)以下命令創(chuàng)建tailwind.config.js文件

npx tailwind init

創(chuàng)建好的文件位于項(xiàng)目的根目錄下

編輯tailwind.config.js文件

下面，我們需要對(duì)tailwind.config.js文件進(jìn)行編輯，將配置里purge項(xiàng)根據(jù)模板的路徑，這樣避免沒(méi)有使用到的樣式編譯進(jìn)生產(chǎn)環(huán)境的代碼中

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

將Tailwind引入到CSS中

打開(kāi)src/index.css文件，使用@tailwind命令來(lái)使用

@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') );

到此，所有的配置結(jié)束了，我們可以在模板或頁(yè)面文件中使用Tailwind CSS了。

分享硬核的編程知識(shí)，關(guān)注“太空編程”公眾號(hào)

總結(jié)

以上是生活随笔為你收集整理的使用React和Tailwind CSS搭建项目框架的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。