![M4@(]P5D%){LJ8C9W[(_O`J.png](https://ucc.alicdn.com/pic/developer-ecology/2411a43b396646a9bb9c8e7f7f0705c9.png?x-oss-process=image/resize,w_1400/format,webp "M4@(]P5D%){LJ8C9W[(_O`J.png")
众所周知，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了。
