如何使用 Yeoman Generator 创建的 React Microsoft Office 插件设置 Tailwind CSS？

Question

我使用 Yeoman Generator 通过 React 创建了一个 Microsoft Office 插件（用于 PowerPoint），如下所述： https://learn.microsoft.com/en-us/office/dev/add-ins/develop/yeoman-generator-overview

现在的问题是我如何顺风顺水。

按照 Create React App 的 Tailwind 安装文档 (https://tailwindcss.com/docs/installation) 不起作用。

我认为安装 Tailwind CSS 作为 PostCSS 插件可能是个好主意，但我没有让它工作。

有什么推荐吗？

Answer 1

yeoman 生成器生成的骨架使用 webpack 进行捆绑。看来你需要设置 Setup Tailwind CSS with Webpack。

此外，您可能会发现 Tailwind 无法像带有 JIT #4000 线程的 Webpack 一样工作。

Answer 2

这些是使用 tailwind v3.3 在 yeoman 任务窗格应用程序中为我安装它所需的步骤

1. 安装依赖项：

npm install --save-dev style-loader css-loader postcss postcss-loader postcss-preset-env tailwindcss

2. 将以下内容添加到项目根目录下的 webpack.config.js 中的“rules”块中：

{
   test: /\.css$/i,
   include: path.resolve(__dirname, "src"),
   use: ["style-loader", "css-loader", "postcss-loader"],
},

还将

const path = require('path');

添加到此文件的顶部。

3. 将这些行添加到 taskpane.css 的顶部

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

4. 从

   <link href="taskpane.css" rel="stylesheet" type="text/css" />

   中删除

   taskpane.html

   并将其作为导入添加到

   src/taskpane/index.tsx

   的顶部，如下所示：

import "./taskpane.css";

5. 在项目的根目录中创建一个

   tailwind.config.js

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

6. 添加postcss.config.js

const tailwindcss = require("tailwindcss");
module.exports = {
  plugins: ["postcss-preset-env", tailwindcss],
};

完成