next.js 如何整合故事书与顺风CSS，创建下一个应用程序和TypeScript

vhmi4jdf 于 2023-02-12 发布在 TypeScript

关注(0)|答案(2)|浏览(142)

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

我试图让Storybook与Tailwind CSS一起工作，但到目前为止还没有成功。以下是我遵循的步骤：
1.我已经从头开始创建了一个新的TypeScript项目，使用Create Next App引导它。我按照Tailwinds website上的说明操作。Tailwind在该应用程序上运行良好。
1.我按照their website上的说明设置了StoryBook。StoryBook在端口6006上启动正常。
1.我相应地配置了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 repo：https://github.com/TRahulSam1997/storybook-tailwind-next-typescript-v2
任何帮助将不胜感激!

next.js

来源：https://stackoverflow.com/questions/70969973/how-to-integrate-storybook-with-tailwind-css-create-next-app-typescript

2条答案

按热度按时间

qoefvg9y1#

更新!
简单地这样做工作：
进口

import 'tailwindcss/tailwind.css';

到预览. js
多亏了https://stackoverflow.com/a/68022201/12198222

赞(0）回复(0）举报 2023-02-12

xj3cbfub2#

在tailwind.config.js文件中添加stories文件夹的路径。

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "./stories/**/*.{js,ts,jsx,tsx}", //instruct tailwind to read the stories folder
  ],
  theme: {},
  plugins: [],
}

赞(0）回复(0）举报 2023-02-12

我来回答

next.js 如何整合故事书与顺风CSS，创建下一个应用程序和TypeScript

2条答案

相关问题

热门标签

最新问答