如何为Yeoman生成的React版Microsoft Office Add-in配置Tailwind CSS

Yeoman生成的Office Add-in并非标准Create React App结构，直接套用CRA的Tailwind安装流程会失效，以下是适配该项目结构的可行方案：

1. 安装依赖 #

在项目根目录执行命令：

npm install tailwindcss postcss autoprefixer --save-dev

2. 生成配置文件 #

初始化Tailwind和PostCSS配置文件：

npx tailwindcss init -p

执行后会在根目录生成tailwind.config.js和postcss.config.js两个文件。

3. 配置Tailwind内容路径 #

打开tailwind.config.js，修改content数组，确保Tailwind能扫描到项目中所有React组件和HTML文件：

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

4. 修改Webpack配置 #

Yeoman生成的Office Add-in使用Webpack构建，需要调整webpack.config.js中的CSS loader配置，让其支持PostCSS：
找到配置中module.rules里处理.css文件的规则，将原有的css-loader配置替换为包含postcss-loader的链式配置：

module: {
  rules: [
    // 其他规则...
    {
      test: /\.css$/i,
      use: [
        'style-loader',
        'css-loader',
        'postcss-loader' // 添加这一行
      ],
    },
    // 其他规则...
  ]
}

如果项目中使用了.scss或.sass，需同步修改对应规则，添加postcss-loader。

5. 导入Tailwind基础样式 #

在项目的全局CSS文件（通常是src/index.css）顶部添加Tailwind指令：

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

6. 测试验证 #

启动开发服务器：

npm start

在React组件中添加Tailwind类名（比如<div className="bg-blue-500 text-white p-4">Test Tailwind</div>），打开PowerPoint加载项，查看样式是否正常生效。

内容的提问来源于stack exchange，提问作者Alexander F-B