更新：我最初的答案可能对其他人有用，所以我将它留作参考。然而，在本例中，问题出在tailwind.config.js中。
变更

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

到

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

原件：
我刚刚测试了一下，Storybook的构建符合我的预期。我认为我们配置中的关键区别在于我没有在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目录的内容：

由于JIT编译器的原因，以上解决方案不适用于Tailwind版本〉3.0。

• • 溶液1：简易解决方案**

在.storybook/preview.js文件中，添加此行以编译tailwind生成的css文件，如下所示-

import '!style-loader!css-loader!postcss-loader!tailwindcss/tailwind.css';

这里tailwindcss/tailwind.css是tailwind css文件，看，重要的是我必须添加!postcss-loader!来编译tailwind生成的css。
您也可以添加您的自定义scss文件，如有-

import '!style-loader!css-loader!sass-loader!../src/scss/style.scss';

这里../src/scss/style.scss是自定义scss文件。
对于大多数人来说，这将在Tailwind版本〉3.0中工作，没有任何问题。

• • 溶液2：Kinda Hack解决方案**

在预览页中创建自定义样式元素

import tailwindCss from '!style-loader!css-loader!postcss-loader!sass-loader!tailwindcss/tailwind.css';
const storybookStyles = document.createElement('style');
storybookStyles.innerHTML = tailwindCss;
document.body.appendChild(storybookStyles);

希望，这将有助于新的Tailwind用户谁是工作在Tailwind大于v3.0。

我也遇到过类似的问题。我的问题是通过添加以下内容来解决的：import "../src/index.css";到.故事书/预览. js

下面的配置将使Tailwind生成CSS，因为新的tailwind类被添加到开发模式下的标记中（热重载）。
总之，我不认为@storybook/addon-postcss可以与Tailwind JIT和Storybook热重载一起工作，解决方法是使用postcss-loader webpack加载器。
安装这些deps：
@storybook/builder-webpack5@storybook/manager-webpack5postcss-loaderwebpack（必须是版本5）

// .storybook/main.js
const path = require("path");

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    // {
    //   name: "@storybook/addon-postcss",
    //   options: {
    //     postcssLoaderOptions: {
    //       implementation: require("postcss"),
    //     },
    //   },
    // },
  ],
  framework: "@storybook/react",
  core: {
    builder: "webpack5",
  },
  webpackFinal: (config) => {
    config.module.rules.push({
      test: /\.css$/,
      use: [
        {
          loader: "postcss-loader",
          options: {
            postcssOptions: {
              plugins: [require("tailwindcss"), require("autoprefixer")],
            },
          },
        },
      ],
      include: path.resolve(__dirname, "../"),
    });
    return config;
  },
};

// .storybook/preview.js
import "../styles/globals.css";

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

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

如果你使用故事书与TSdx和tailwind css，你应该能够导入一个CSS到组件
1.为了能够将你的CSS导入到组件中，你需要告诉TSDX如何将它包含在你的代码中。为此，你需要安装rollup-plugin-postcss（因为TSDX使用rollup）。
1.在src目录中创建一个CSS文件，我们将在任何想要使用Tailwind的组件中使用该文件。
好了，现在让我们添加rollup-plugin-postcss：

yarn add -D rollup-plugin-postcss

TSDX是fully customizable，您可以添加任何汇总插件，但要注意它会覆盖默认行为
现在，您将创建一个
tsdx.config.js

// tsdx.config.js

const postcss = require('rollup-plugin-postcss');

module.exports = {
  rollup(config, options) {
    config.plugins.push(
      postcss({
        config: {
          path: './postcss.config.js',
        },
        extensions: ['.css'],
        minimize: true,
        inject: {
          insertAt: 'top',
        },
      })
    );
    return config;
  },
};

这是一个postCSS路径，告诉它你想要它运行在什么文件上。minimize键是允许你最小化输出。这里最重要的键是“inject”。你把它设置为“top”来告诉postCSS在我们页面的什么地方将插入CSS。这对Tailwind来说是至关重要的，因为它需要有任何其他样式表的最高优先级。
接下来，在第2部分中，您将在src目录下创建一个tailwind.css（可以命名为其他任何名称）文件，并将其粘贴到：

// src/tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;

将CSS import语句添加到组件中

// src/Thing.tsx

import React, { FC, HTMLAttributes, ReactChild } from 'react';

// ! Add the CSS import statement !
import './tailwind.css`;

// ...

// we'll add some Tailwind classes on our components to test

export const Thing: FC<Props> = ({ children }) => {
  return (
    <div className="flex items-center justify-center w-5/6 m-auto text-2xl text-center text-pink-700 uppercase bg-blue-300 shadow-xl rounded-3xl">
      {children || `the snozzberries taste like snozzberries`}
    </div>
  );
};

对于那些仍然有这个问题并且使用postcss〉= 8的用户，我建议您按照以下步骤操作：将此添加到tailwind.config.js

// eslint-disable-next-line @typescript-eslint/no-var-requires
const path = require("path")

module.exports = {
  content: [path.join(__dirname, "./src/**/*.(js|jsx|ts|tsx)")],
  theme: {
    extend: {},
  },
  variants: {}
  plugins: [],
}

将此添加到preview.js

import "!style-loader!css-loader!postcss-loader!tailwindcss/tailwind.css"

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}

这已经帮助我解决了这个问题，我希望它也能帮助你

我不能解决这个问题，上面的答案对我不起作用，所以我最终只是设置我的build-storybook脚本在build.package.json脚本之后运行tailwind本身，最后看起来像这样：

"build-storybook": "build-storybook -s public && $(npm bin -g)/tailwindcss -i storybook-static/static/css/main.*.chunk.css -o storybook-static/static/css/main.*.chunk.css -m",

有点乱，但是这里的$(npm bin -g)/使用了我全局安装的（npm i -g tailwindcss）版本的tailwindcss，因为安装到项目中的版本对我来说在构建中不起作用。
-i和-o指定输入和输出文件，-m缩小输出。
我可以预见，如果构建了不止一个CSS文件，这会导致问题（也许使用storybook-static/static/css/**/*.css可以代替？），但这可能会帮助一些人得到一些工作。

当你尝试使用Tailwind CSS创建故事书时，你会注意到CSS没有被应用。有一个简单的解决方案帮助了我。
你的preview.js应该是这样的。

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

您需要在preview.js中添加以下行来修复它。
//添加下面的导入行

import "!style-loader!css-loader!postcss-loader!tailwindcss/tailwind.css";

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

然而，这将是一个临时修复。要完全解决这个问题，您需要添加下面提到的包。

yarn add -D @storybook/addon-postcss

如需参考，请单击此处How to add postcss

上面提到的解决方案起作用了，但只是部分。我面临着两个问题：
1.如果我向story添加新的类，那么tailwind不会添加与类相关的相应样式。
1.热再装填不起作用。

• • 溶液**：在tailwind.config.js文件中添加stories文件夹的路径。

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "./stories/**/*.{js,ts,jsx,tsx}", //needed to make hot reload work with stories
  ],
  theme: {},
  plugins: [],
}