安装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.jsmodule.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.jsimport 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;
