构建和导出 TailwindCSS 和 NextJS 时遇到问题

Question

我在构建和导出 TailwindCSS 和 NextJS 项目时遇到了困难。使用 npm run dev 时，该项目运行良好，我可以使用所有 Tailwind 类。当我运行 npm run build && npm run export 时，所有 Tailwind CSS 样式都消失了，并且生成的 index.html 文件没有任何 CSS 样式。

Package.json：

{
  "name": "web",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build:style": "tailwind build src/styles/index.css -o src/styles/tailwind.css",
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "export": "next export"
  },
  "dependencies": {
    "@headlessui/react": "^1.4.0",
    "@heroicons/react": "^1.0.2",
    "next": "11.0.1",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "autoprefixer": "^10.3.1",
    "eslint": "7.30.0",
    "eslint-config-next": "11.0.1",
    "postcss": "^8.3.6",
    "tailwindcss": "^2.2.7"
  }
}

tailwind.config.js

module.exports = {
  mode: 'jit',
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      zIndex: {
         '-10': '-10',
      }
    }
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

App.js

import 'tailwindcss/tailwind.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

我觉得 npm run build && npm run export 没有调用任何 Tailwind 构建命令。我在他们的文档中找不到关于如何使用 NextJS 实际构建 TailwindCSS 项目的任何说明。