在React项目中集成Tailwind CSS的兼容方案

作者：窗边听雨

时间：2026-10-25

本文介绍如何在React项目中集成Tailwind CSS。针对React默认PostCSS版本与Tailwind的兼容性问题，通过安装特定旧版依赖并使用Craco工具覆盖配置，实现样式系统的正确加载与使用。

文章目录

在React应用中引入Tailwind CSS

首先，使用官方脚手架工具初始化一个新的React项目。

npx create-react-app name

进入项目根目录，执行命令安装Tailwind CSS及其依赖的PostCSS和Autoprefixer。

由于React脚手架默认集成了较新版本的PostCSS，而Tailwind CSS在此阶段需要特定兼容层，因此必须明确指定安装对应的旧版本依赖。

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwind/postcss7-compat postcss@^7 autoprefixer@^9

此外，React默认构建配置不允许直接覆盖PostCSS设置，因此需要引入Craco工具来接管构建流程。

npm i @craco/craco

安装完成后，打开package.json文件，将scripts字段中原本指向react-scripts的命令替换为craco，包括start、build和test脚本。

在React应用中引入Tailwind CSS

接着，在与package.json同级目录下创建craco.config.js配置文件，并写入以下代码。

module.exports = {
    style: {
        postcss: {
            plugins: [
                require('tailwindcss'),
                require('autoprefixer')
            ]
        }
    }
}

该配置指定了PostCSS插件的加载路径，确保Tailwind CSS能正确识别。

随后，执行初始化命令生成Tailwind的配置文件。

npx tailwindcss init`

在生成的tailwind.config.js中，配置purge数组以指定扫描源文件的路径，通常包含src目录下的所有文件以及public文件夹中的index.html。

    './src/**/*.{js,jsx,ts,tsx}',
    './public/index.html'

在React应用中引入Tailwind CSS

编辑src目录下的index.css文件，清空原有内容并引入Tailwind的三个核心指令：base、components和utilities。

@tailwind base;
@tailwind components;
@tailwind utilities;

完成上述配置后，即可在React组件中正常使用Tailwind CSS。可以在App组件中进行简单测试。

import pic from './malibu.jpg'
function App() {
  return (
    <div className="antialiased text-gray-900 bg-gray-200 min-h-screen p-8 flex items-center flex-col justify-center min-w-screen">
      <div className="p-4 bg-indigo-300 rounded-3xl ">
        <h1 className=" text-xl font-semibold text-gray-500">Tailwind CSS</h1>
        <div className="w-24 mt-3">
          <img className="rounded-lg shadow-md" src={pic} alt="pic" />
        </div>
        <div className="">
          <span className="float-left mt-2 p-2 bg-green-300 text-sm font-black rounded-full shadow-sm">Nice view!</span>
          <div></div>
        <span className=" mr-100% float-right mt-2 p-2 bg-white text-sm font-black rounded-full shadow-sm">Go now?</span>
        </div>
       
      </div>
    </div>
  );
}

export default App;