如何将 Storybook 与 Tailwind CSS、Create Next App 和 TypeScript 集成

Question

*以下问题与我问的 previous question 有关，如果我重复了，请提前致歉，但我仍然无法解决我的问题。

我正在尝试让 Storybook 与 Tailwind 一起工作 CSS 到目前为止无济于事。这些是我遵循的步骤：

我从头开始创建了一个新的 TypeScript 项目，bootstrapping 它与创建下一个应用程序。我按照 Tailwinds website 上的说明进行操作。 Tailwind 在 App 上运行良好。
我按照 their website 上的说明设置了 Storybook。 Storybook 在端口 6006 上正常启动。
我相应地配置了 main.js 文件以合并 PostCSS 以便 Tailwind 在 Storybook 中工作：

module.exports = {
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-postcss"
  ],
  "framework": "@storybook/react"
}

尽管做了所有这些，我没有看到 Tailwind 对故事组件有任何影响——仅在应用程序中。

我尝试通过在 Storybook 组件中放入一个小元素来测试 Tailwind 是否有效。我没有看到它按预期呈现：

<h1 className="text-3xl font-bold underline">
    Tailwind Works!
</h1>

Link 到 Github 回购：https://github.com/TRahulSam1997/storybook-tailwind-next-typescript-v2

如有任何帮助，我们将不胜感激！

Answer 1

更新！

简单地这样做就奏效了：

导入

import 'tailwindcss/tailwind.css';

变成preview.js

感谢

如何将 Storybook 与 Tailwind CSS、Create Next App 和 TypeScript 集成

How to integrate Storybook with Tailwind CSS, Create Next App & TypeScript

typescript

postcss

next.js

storybook

tailwind-css