文章目录
在React项目中使用 Tailwind CSS，需要安装tailwind，配置tailwind，配置项目使用tailwind，样式文件引入tailwind，最后可以在组件中写tailwind样式类进行开发。
一、创建 React 项目
$ npx create-react-app react-tailwind
$ cd react-tailwind
二、安装 Tailwind 以及其它依赖项:
$ npm i -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
Create React App 尚未支持 PostCSS 8，需要安装 Tailwind CSS v2.0 PostCSS 7 兼容性版本。
三、安装和配置 CRACO
由于 Create React App 不能让您覆盖原生的 PostCSS 配置，所以我们还需要安装 CRACO 才能配置 Tailwind。
1、安装 CRACO
npm install @craco/craco
安装完后，更新 package.json 文件中的 scripts，将 eject 以外的所有脚本都用 craco 代替 react-scripts。
package.json
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
}
2、配置CRACO
在项目根部创建一个 craco.config.js，并添加 tailwindcss 和 autoprefixer 作为 PostCSS 插件。
// craco.config.js
module.exports = {
style: {
postcss: {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
},
},
}
四、创建 Tailwind 配置文件
生成 tailwind.config.js 文件，以下命令在项目根目录创建一个最小化的 tailwind.config.js 文件
$ npx tailwindcss-cli@latest init
生成的文件如下：
// tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
},
},
variants: {
extend: {
},
},
plugins: [],
}
五、配置 Tailwind
配置 Tailwind 来移除生产环境下没有使用到的样式声明
在 tailwind.config.js 文件中，配置 purge 选项指定所有的 components 文件，使得 Tailwind 可以在生产构建中对未使用的样式进行摇树优化。
// tailwind.config.js
module.exports = {
purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
},
},
variants: {
extend: {
},
},
plugins: [],
}
六、在 CSS 中引入 Tailwind
打开 Create React App 生成的 ./src/index.css 文件 , 使用 @tailwind 指令来包含 Tailwind的 base、 components 和 utilities 样式，替换掉原内容
/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
Tailwind 会在构建时将这些指令转换成所有基于您配置的设计系统生成的样式文件。
七、把 CSS 文件导入到 ./src/index.js 文件中。
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
运行 npm run start, Tailwind CSS 就可以在 Create React App 项目中使用了。
八、在组件中使用样式类
export default function Tailwind () {
return (
<>
<header className='flex px-10 items-center justify-between bg-black text-gray-200'>
<img className='w-8 h-8' src={
vip} alt='' />
<nav>
<ul className='flex'>
{
routes.map(x => {
return <li key={
x.path}><NavLink className='block px-10 py-5' to={
x.path}>{
x.text}</NavLink></li>
})
}
</ul>
</nav>
</header>
<main className='container'>
<Outlet />
</main>
<footer className='p-10 bg-gray-800 text-white'>
footer
</footer>
</>
)
}
