集成Tailwind CSS与 Storybook
1. 配置 PostCSS
Tailwind 使用 PostCSS 编译您的 CSS。如果您正在使用
vite@storybook/nextjs@storybook/preset-create-react-app与[email protected]@storybook/angular
那么您可以跳到下一步。
对于 Webpack 用户，您需要安装@storybook/addon-styling-webpack 插件。
运行以下脚本以安装并注册插件
npx storybook@latest add @storybook/addon-styling-webpack这将运行一个配置脚本，引导您完成插件的设置。如果出现提示，请从配置选项中选择PostCSS。
配置脚本失败了吗？
在幕后，此命令运行npx @storybook/auto-config styling，它负责读取您的项目并尝试为您的所需工具配置 Storybook Webpack。如果直接运行该命令无法解决您的问题，请考虑在@storybook/auto-config 存储库中提交错误报告，以便我们进一步改进它。有关 PostCSS 的手动配置说明，您可以参考此处的文档。
2. 将 Tailwind 提供给故事
现在，您可以将tailwind.css 文件导入到 .storybook/preview.js 文件中。这将使 Tailwind 的样式类可用于所有故事。
// .storybook/preview.js
import '../src/tailwind.css'; // replace with the name of your tailwind css file2.1. Angular
如果您使用的是 Angular，则需要将tailwind.css 文件添加到 angular.json 文件中。这将确保您的样式使用 PostCSS 进行处理，并注入到渲染故事的预览 iframe 中。
// angular.json
{
"storybook": {
"builder": "@storybook/angular:start-storybook",
"options": {
"browserTarget": "my-default-project:build",
"styles": ["src/tailwind.css"]
}
}
}3. 添加主题切换工具
Tailwind 默认提供明暗两种主题。您可以覆盖这些主题并添加更多主题。为了充分利用您的故事，您应该有一种在所有主题之间切换的方法。
首先，更新您的tailwind.config.js 文件以根据类或 data 属性更改主题。此示例使用 data 属性。
// tailwind.config.js
module.exports = {
content: ['./src/**/*.{js,jsx,ts,tsx}'],
// Toggle dark-mode based on .dark class or data-mode="dark"
darkMode: ['class', '[data-mode="dark"]'],
theme: {
extend: {},
},
plugins: [],
};接下来，安装@storybook/addon-themes 插件以提供切换工具。
运行以下脚本以安装并注册插件
npx storybook@latest add @storybook/addon-themes这将运行一个配置脚本，引导您完成插件的设置。
配置脚本失败了吗？
在幕后，这运行npx @storybook/auto-config themes，它应该读取您的项目并尝试使用正确的装饰器配置您的 Storybook。如果直接运行该命令无法解决您的问题，请在@storybook/auto-config 存储库中提交错误，以便我们进一步改进它。要手动添加此插件，请安装它，然后将其添加到 .storybook/main.ts 中的 addons 数组中。
3.1. 通过类名切换主题
将withThemeByClassName 装饰器从 @storybook/addon-themes 添加到您的 Storybook 中。
// .storybook/preview.js
import { withThemeByClassName } from '@storybook/addon-themes';
/* snipped for brevity */
export const decorators = [
withThemeByClassName({
themes: {
light: 'light',
dark: 'dark',
},
defaultTheme: 'light',
}),
];3.2. 通过 data 属性切换主题
将withThemeByDataAttribute 装饰器从 @storybook/addon-themes 添加到您的 Storybook 中。
// .storybook/preview.js
import { withThemeByDataAttribute } from '@storybook/addon-themes';
/* snipped for brevity */
export const decorators = [
withThemeByDataAttribute({
themes: {
light: 'light',
dark: 'dark',
},
defaultTheme: 'light',
attributeName: 'data-mode',
}),
];此代码将创建一个新的工具栏菜单，用于为您的故事选择所需的主题。
参与进来
现在您已准备好使用 Tailwind 和 Storybook 了。🎉
如果您在工作中使用 Tailwind，我们希望您能帮助我们使此设置更加轻松。加入Discord 中的维护者以参与其中，或跳转到插件文档。
- ShaunEvening
