如何在基于JSX的CRA项目中集成Tailwind CSS与SASS？

按以下步骤操作即可完成集成：

• 1. 安装Tailwind及相关依赖
  在项目根目录终端运行：

  npm install -D tailwindcss postcss autoprefixer
  # 用yarn的话执行：
  yarn add -D tailwindcss postcss autoprefixer
  

• 2. 初始化Tailwind配置文件
  执行这条命令生成tailwind.config.js和postcss.config.js两个配置文件：

  npx tailwindcss init -p
  

• 3. 配置Tailwind的内容扫描路径
  打开tailwind.config.js，修改content数组，让Tailwind能检测到项目中所有JSX/JS文件里的类名：

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

• 4. 在主SCSS文件中导入Tailwind核心指令
  打开src/index.scss，在文件顶部添加Tailwind的基础、组件、工具类指令：

  @tailwind base;
  @tailwind components;
  @tailwind utilities;
  
  // 你的自定义SASS样式可以写在这下方
  

• 5. 修正样式导入方式
  删掉你之前在public/index.html里添加的<style lang="sass">标签，CRA项目的标准做法是在src/index.js中导入样式文件，确保index.js里有这行代码：

  import './index.scss';
  

• 6. 测试集成效果
  在任意JSX组件（比如src/App.js）中使用Tailwind类名测试：

  function App() {
    return (
      <div className="container mx-auto p-4 bg-gray-100">
        <h1 className="text-3xl font-bold text-blue-600">Tailwind + React + SASS 集成成功！</h1>
      </div>
    );
  }
  
  export default App;
  

  启动项目：

  npm start
  

  打开浏览器看到对应样式效果，就说明集成完成了。

内容的提问来源于stack exchange，提问作者Rene Rubio