安装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;