如何在React.js项目中使用Tailwind.css？能否一键集成二者？

当然可行，React + Tailwind CSS 是当前前端开发里非常流行的组合，Tailwind的原子化CSS模式能和React的组件化开发完美适配，既能提升样式开发效率，也能让组件样式更可控。

一、手动集成步骤（适合理解底层逻辑） #

1. 创建基础React项目 #

用官方脚手架生成项目：

npx create-react-app my-react-tailwind-project
cd my-react-tailwind-project

2. 安装Tailwind依赖 #

安装Tailwind及配套的PostCSS工具：

npm install -D tailwindcss postcss autoprefixer

3. 生成配置文件 #

一键初始化Tailwind和PostCSS的配置文件：

npx tailwindcss init -p

4. 配置内容扫描路径 #

打开tailwind.config.js，修改content数组，让Tailwind能识别React组件文件：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./public/index.html",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

5. 引入Tailwind核心样式 #

打开src/index.css，替换原有内容为Tailwind的基础指令：

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

6. 测试验证 #

启动项目后，在组件里直接使用Tailwind类名，比如修改src/App.js：

function App() {
  return (
    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
      <h1 className="text-4xl font-bold text-blue-600">React + Tailwind 集成成功！</h1>
    </div>
  );
}

export default App;

启动命令：

npm start

二、一键集成方案（快速上手） #

直接用现成模板生成已集成Tailwind的React项目，无需手动配置：

方案1：Vite官方模板（推荐，构建速度更快） #

npm create vite@latest my-react-tailwind-project -- --template react-tailwind
cd my-react-tailwind-project
npm install
npm run dev

方案2：Create React App社区模板 #

npx create-react-app my-react-tailwind-project --template tailwindcss
cd my-react-tailwind-project
npm start

内容的提问来源于stack exchange，提问作者Fatwa Reza Rizqika