安装tailwind css
npm i -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
安装 CRACO
由于 Create React App 不能让您覆盖原生的 PostCSS 配置,所以我们还需要安装 CRACO 才能配置 Tailwind。
npm install @craco/craco
配置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文件
// 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: [],
}
在/src/index.css中引入tailwind文件
/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
在/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')
);
使用
function Login(){
return (<div>
<div className='text-[red] text-2xl'>是否导入tailwindcss</div>
</div>)
}
export default Login;