加入直播:美国东部时间周四上午 11 点,Storybook 9 发布与 AMA 问答

Tailwind Autodocs

直接来自您的 tailwind 配置的设计系统文档。

在 Github 上查看

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”的新标签页。🎉