错误：Tailwindcss 在故事书中不起作用
我使用webpack5，typescript，tailwindcss和storybook制作一个Button UI组件，我将示例代码从storybook修改为tailwindcss 这是CSS代码：
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.storybook-button {
@apply font-sans font-bold border-none rounded-3xl cursor-pointer inline-block leading-3;
}
.storybook-button--primary {
@apply text-white bg-[#1ea7fd];
}
.storybook-button--secondary {
@apply text-[#333] bg-[]
color: #333 bg-transparent shadow-cyan-500/50;
}
.storybook-button--small {
@apply text-xs px-4 py-2;
}
.storybook-button--medium {
@apply text-sm px-5 py-3;
}
.storybook-button--large {
@apply text-base px-6 py-3;
}
}
但是当我运行yarn Storybook时，这个CSS文件不起作用 带有 tailwindcss 的故事书中的按钮
I use webpack5, typescript, tailwindcss and storybook to make an Button UI component, I modify the example code from storybook to tailwindcss
Here is the css code:
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.storybook-button {
@apply font-sans font-bold border-none rounded-3xl cursor-pointer inline-block leading-3;
}
.storybook-button--primary {
@apply text-white bg-[#1ea7fd];
}
.storybook-button--secondary {
@apply text-[#333] bg-[]
color: #333 bg-transparent shadow-cyan-500/50;
}
.storybook-button--small {
@apply text-xs px-4 py-2;
}
.storybook-button--medium {
@apply text-sm px-5 py-3;
}
.storybook-button--large {
@apply text-base px-6 py-3;
}
}
But when I run yarn storybook, this css file is not working
Button in storybook with tailwindcss
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
这个问题也让我很头疼。我遵循了 StackOverflow 和 Github 上可以找到的所有解决方案。
但我只能通过运行 tailwind-CLI 并构建 global.css 文件并将其导入到
./storybook/preview.js这里是使用的 cli 命令来“修复它”。
然后从上面命令中的输出路径（-o 标志）导入它。
This problem gave me headaches too. I followed every solution that can be found on StackOverflow and Github.
But I only could "fix it" by running the tailwind-CLI and building the global.css file and importing it to
./storybook/preview.jshere's the cli command used.
then import it from the output path (-o flag) in the command above.