如何将 Storybook 与 Tailwind CSS、创建下一个应用程序和 TypeScript 集成

Question

*以下问题与我之前提出的问题相关，因此如果我重复，请提前道歉，但我仍然无法解决我的问题。

\n

我正在尝试让 Storybook 与 Tailwind CSS 一起使用，但到目前为止没有成功。这些是我遵循的步骤：

\n

\n
1. 我从头开始创建了一个新的 TypeScript 项目，使用 Create Next App 进行引导\nit。我按照Tailwinds 网站上的说明进行操作。Tailwind 在应用程序上运行良好。
\n
2. 我按照他们网站上的说明设置了 Storybook 。Storybook 在端口 6006 上启动正常。
\n
3. 我相应地配置了 main.js 文件，以合并 PostCSS，以便 Tailwind 在 Storybook 中工作：
\n

\n

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

\n

尽管做了所有这些，我没有看到 Tailwind 对应用程序中的故事组件\xe2\x80\x94 产生任何影响。

\n

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

\n

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

\n

链接到 Github 存储库：https://github.com/TRAhulSam1997/storybook-tailwind-next-typescript-v2

\n

任何帮助将非常感激！

\n

Answer 1

更新！

简单地这样做就有效了：

进口

import 'tailwindcss/tailwind.css';

进入preview.js

感谢/sf/answers/4761554101/