Tailwind Autodocs 🎨
直接来自您的 tailwind 配置的设计系统文档。
演示:Storybook*
*这使用了此项目中的 tailwind.config.js
文件
功能
- 自动从
tailwind.config.js
生成文档 - 支持热模块重载 (HMR);因此对您的 tailwind 配置的更改会立即反映在 Storybook 中
- 使用 Storybook 的文档块显示主题颜色和排版
...以及更多有望即将推出的功能
- 添加 tailwind 间距和屏幕断点的 autodocs
- 将文档拆分为单独的标签/条目
要求
- Storybook
- TailwindCSS v3.X (注意:目前尚不兼容 v4)
安装
首先,安装软件包。
npm install --save-dev storybook-addon-tailwind-autodocs
然后,将其注册为 .storybook/main.js
中的插件,并在其中指定您的 tailwind.config.js
路径。
// .storybook/main.ts
// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework';
const config: StorybookConfig = {
stories: [
// ...
'../tailwind.config.js', // 👈 replace with your tailwind configs path
],
// ...
addons: [
'@storybook/addon-essentials',
'storybook-addon-tailwind-autodocs', // 👈 register the addon here
],
};
export default config;
然后,使用 npm run storybook
运行 Storybook
就这样!您现在应该会在 Storybook 中看到一个名为“Theme”的新标签页。🎉