css - Tailwind css 类未显示在 Storybook 构建中

Question

我正在尝试使用顺风 css 构建我的故事书。运行时 build-storybook这些组件是用 tailwind 类呈现的。不幸的是，当我构建故事书并运行 create build storybook-static 时与 npx http-server storybook-static类未加载到故事中，组件未设置样式显示。
这是我的元素的repro repo:
https://gitlab.com/ens.evelyn.development/storybook-issue
这是我的 main.js :

    const path = require('path')

module.exports = {
  "stories": [
    "../src/components/**/**/*.stories.mdx",
    "../src/components/**/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    {
     name: '@storybook/addon-postcss',
     options: {
       postcssLoaderOptions: {
         implementation: require('postcss'),
       },
     },
   },        
   "@storybook/addon-actions",
    "storybook-tailwind-dark-mode"
  ]}

我的元素结构如下所示:

.storybook 
src
  components 
     subdir
       Button
         index.tsx
         button.stories.js 
  styles
    index.css (<-- tailwindcss file)

非常感谢任何提示或建议。

Answer 1

更新:我的原始答案可能对其他人有用，因此我将其留作引用。但是，在这种情况下，问题出在 tailwind.config.js 中。
改变

purge: {
    mode: 'all',
    content: [
      './src/components/**/**/*.{ts, tsx}'
    ],
  },

到

purge: ['./src/**/*.{js,jsx,ts,tsx}'],

原来的:
刚刚测试了它，故事书按我的预期构建。我认为我们配置的主要区别在于我没有对 main.js 中 Storybook 的 webpack 配置进行更改。相反，我正在使用 @storybook/addon-postcss对于 postcss@^8(对于 tailwind@^2 是必需的):

// main.js
module.exports = {
  ...
  addons: [
    ...
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    },
  ],
};

我在 postcss.config.js(在我的元素根目录中)指定了必要的插件:

// postcss.config.js
module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  }

还值得注意的是，我直接在 Storybook 的 preview.js 中导入了 Tailwind，而不是通过我自己的 css 文件:

// preview.js
import 'tailwindcss/tailwind.css';
export const parameters = {...}

希望做出这些更改能让 Tailwind 为您服务。
为了比较(见下面的评论)，这里是我的 build storybook-static 目录的内容: