Storybook建议从现在开始使用@storybook/addon-postcss自定义postCSS配置（而不是依赖于自定义postcss-loader）：
1.将postCSS加载项添加到安装中

npm i -D @storybook/addon-postcss     # or
yarn add -D @storybook/addon-postcss

1.在项目根目录中创建postcss.config.js

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

1.将插件添加到.storybook/main.js

// .storybook/main.js
module.exports = {
  ...
  addons: [
    ...
    {
      name: '@storybook/addon-postcss',
      options: {
        cssLoaderOptions: {
          // When you have splitted your css over multiple files
          // and use @import('./other-styles.css')
          importLoaders: 1,
        },
        postcssLoaderOptions: {
          // When using postCSS 8
          implementation: require('postcss'),
        },
      },
    },
  ],
};

1.将css文件导入.storybook/preview.js

// .storybook/preview.js
import '../src/styles.css';

你就快到了
缺少的配置是添加一个Webpack配置，以便将tailwind应用于postcss-loader：

const path = require('path')

module.exports = {
  stories: [
    '../src/**/*.stories.mdx', 
    '../src/**/*.stories.@(js|jsx|ts|tsx)'
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/preset-create-react-app',
  ],
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.css$/,
      use: [
        {
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              plugins: [
                require('tailwindcss'),
                require('autoprefixer'),
              ],
            },
          },
        },
      ],
      include: path.resolve(__dirname, '../'),
    })
    return config
  },
}

TAILWIND STORYBOOK CRA [2022-2023（希望如此）]
package.json

"devDependencies": {
    "@storybook/addon-actions": "^6.5.9",
    "@storybook/addon-essentials": "^6.5.9",
    "@storybook/addon-interactions": "^6.5.9",
    "@storybook/addon-links": "^6.5.9",
    "@storybook/addon-postcss": "^2.0.0",
    "@storybook/builder-webpack5": "^6.5.9",
    "@storybook/manager-webpack5": "^6.5.9",
    "@storybook/node-logger": "^6.5.9",
    "@storybook/preset-create-react-app": "^4.1.2",
    "@storybook/react": "^6.5.9",
    "@storybook/testing-library": "^0.0.13",
    "@typescript-eslint/eslint-plugin": "^5.28.0",
    "@typescript-eslint/parser": "^5.28.0",
    "autoprefixer": "^10.4.7",
    "babel-plugin-named-exports-order": "^0.0.2",
    "eslint": "^8.17.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-react": "^7.30.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-simple-import-sort": "^7.0.0",
    "postcss": "^8.4.14",
    "tailwindcss": "^3.1.1",
    "webpack": "^5.73.0"
  }

tailwind.config.js

module.exports = {
    content: [
        "./src/**/*.{js,jsx,ts,tsx}",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

.storybook/main.js

module.exports = {
  stories: [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "@storybook/preset-create-react-app",
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    },
  ],
  framework: "@storybook/react",
  core: {
    "builder": "@storybook/builder-webpack5"
  }
}

.storybook/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$/,
    },
  },
}

答案是正确的，但在最新的CRA中，我必须这样配置：

config.module.rules.push({
      test: /\.css$/,
      use: [
        {
          loader: "postcss-loader",
          options: {
            // HERE: OPTIONS
            postcssOptions: {
              plugins: [require("tailwindcss"), require("autoprefixer")],
            },
          },
        },
      ],
      include: path.resolve(__dirname, "../"),
    });

类似于ofhouse的答案，但是如果您不想只为几行使用额外的postcss.config.js，或者如果您想在所有内容中使用typescript（因为加载程序不获取postcss.config.ts），这里有一个解决方案。
1.添加正式的postCSS插件

npm i -D @storybook/addon-postcss
yarn add -D @storybook/addon-postcss

1.主风配置和顺风配置
第一次

这个问题也让我头疼，我遵循了StackOverflow和Github上可以找到的每一个解决方案。
但我只能通过运行tailwind-CLI、构建global.css文件并将其导入./storybook/preview.js来“修复”它
下面是使用的cli命令。

npx tailwindcss -i ./src/styles/global.css -o ./.storybook/global.css --watch

然后从上面命令中的输出路径（-o标志）导入它。

// ./storybook/preview.js

import './global.css';

...

我已经尝试了以上所有的答案，但不幸的是，我仍然得到一些奇怪的unknown word错误时，运行的故事书。
这是唯一对我有效的解决方案：https://github.com/storybookjs/addon-postcss/issues/33#issuecomment-1173042151