眾所周知，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搭建项目框架的全部內容，希望文章能夠幫你解決所遇到的問題。

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