如何将 Storybook 与 Tailwind CSS 集成，创建下一个 App 和 TypeScript答案

【问题标题】：How to integrate Storybook with Tailwind CSS, Create Next App & TypeScript如何将 Storybook 与 Tailwind CSS 集成，创建下一个 App 和 TypeScript
【发布时间】：2022-02-03 18:55:32
【问题描述】：

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

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

我从头开始创建了一个新的 TypeScript 项目，引导它与创建下一个应用程序。我按照Tailwinds website 上的说明进行操作。 Tailwind 在应用上运行良好。
我按照their website 上的说明设置了 Storybook。 Storybook 在 6006 端口上启动正常。
我相应地配置了 main.js 文件以将 PostCSS for 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>

Github 仓库链接：https://github.com/TRahulSam1997/storybook-tailwind-next-typescript-v2

任何帮助将不胜感激！

【问题讨论】：

标签： typescript next.js tailwind-css storybook postcss

【解决方案1】：

更新！

只要这样做就行了：

导入

import 'tailwindcss/tailwind.css';

进入 preview.js

感谢https://stackoverflow.com/a/68022201/12198222

【讨论】：