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

vhmi4jdf  于 2023-02-12  发布在  TypeScript
关注(0)|答案(2)|浏览(149)
    • 以下问题与我询问的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
任何帮助将不胜感激!

qoefvg9y

qoefvg9y1#

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

import 'tailwindcss/tailwind.css';

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

xj3cbfub

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: [],
}

相关问题