Tailwindcss в конфигурации веб-пакета не применяется

При разработке надстройки Outlook.

Я бы добавил к этому попутный ветер, вот туто, которому я следую

В package.json я получаю эти скрипты

"scripts": {
    "build": "webpack --mode production",
    "build:dev": "webpack --mode development",
    "dev-server": "webpack serve --mode development",
     ...
  },

затем в webpack.config.js

const config = {
    devtool: "source-map",
    entry: {
      polyfill: ["core-js/stable", "regenerator-runtime/runtime"],
      vendor: ["react", "react-dom", "core-js", "@fluentui/react"],
      taskpane: ["react-hot-loader/patch", "./src/taskpane/index.tsx", "./src/taskpane/taskpane.html"],
      commands: "./src/commands/commands.ts",
    },
    output: {
      clean: true,
    },
    resolve: {
      extensions: [".ts", ".tsx", ".html", ".js"],
    },
    module: {
      rules: [
        {
          test: /\.css$/i,
          include: '/src',
          use: ['style-loader', 'css-loader', 'postcss-loader'],
        },
        {
          test: /\.ts$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-typescript"],
            },
          },
        },
        {
          test: /\.tsx?$/,
          exclude: /node_modules/,
          use: ["react-hot-loader/webpack", "ts-loader"],
        },
        {
          test: /\.html$/,
          exclude: /node_modules/,
          use: "html-loader",
        },
        {
          test: /\.(png|jpg|jpeg|gif|ico)$/,
          type: "asset/resource",
          generator: {
            filename: "assets/[name][ext][query]",
          },
        },
      ],
    },
    plugins: [
      ...
      }),
      new HtmlWebpackPlugin({
        filename: "taskpane.html",
        template: "./src/taskpane/taskpane.html",
        chunks: ["taskpane", "vendor", "polyfills"],
      }),
      new HtmlWebpackPlugin({
        filename: "commands.html",
        template: "./src/commands/commands.html",
        chunks: ["commands"],
      }),
      new webpack.ProvidePlugin({
        Promise: ["es6-promise", "Promise"],
      }),
    ],
    devServer: {
      hot: true,
      headers: {
        "Access-Control-Allow-Origin": "*",
      },
      server: {
        type: "https",
        options: env.WEBPACK_BUILD || options.https !== undefined ? options.https : await getHttpsOptions(),
      },
      port: process.env.npm_package_config_dev_server_port || 3000,
    },
  };

В postcss.config.js:

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

и, наконец, tailwind.config.js

/** @type {import('tailwindcss').Config} */

module.exports = {
  content: ['./dist/*.html'],
    theme: {
    extend: {},
  },
  plugins: [],
};

Когда я пытаюсь применить класс css попутного ветра, ничего не происходит, а также когда я проверяю в devTools, например, импортированы ли токены цветов css попутного ветра, я ничего не вижу.

Я импортирую компоненты попутного ветра в index.css

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

Затем webpack генерирует мне эти импорты в taskpane.html

<link href = "bd3fc3e614edb4896e6a.css" rel = "stylesheet" />
<script defer = "defer" src = "vendor.js"></script>
<script defer = "defer" src = "taskpane.js"></script>

Когда я запускаю свое приложение, используя npm run dev-server Я не вижу, чтобы классы применялись к html.

Я думаю, что попутный ветер не импортирует их в файл css

Вот конфигурация папок моего проекта:

Не стесняйтесь, если вы хотите увидеть содержимое других файлов.