错误:Tailwindcss在故事书中不起作用

Question

我使用webpack5、typescript、tailwindcss和storybook来制作按钮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文件不起作用带有顺风css 的故事书中的按钮

Answer 1

这个问题也让我头疼。我关注了StackOverflow和Github上的每一个解决方案。

但我只能"；修复它"；通过运行tailwind CLI并构建global.css文件并将其导入./storybook/preview.js

这是使用的cli命令。

npx tailwindcss -i ./src/styles/global.css -o ./.storybook/global.css --watch

然后从上面命令中的输出路径(-o标志(导入它。

// ./storybook/preview.js
import './global.css';
...rest of your preview config