Tailwind Autodocs 🎨

直接从您的 Tailwind 配置生成的设计系统文档。

演示：Storybook*

*此演示使用来自该项目的 tailwind.config.js 文件。

功能

• 自动从 tailwind.config.js 生成文档
• 支持热模块替换 (HMR)；因此，您对 Tailwind 配置的更改会立即反映在 Storybook 中。
• 使用 Storybook 的文档块显示主题颜色和排版

…以及更多希望很快推出的功能

• 为 Tailwind 间距和屏幕断点添加自动文档
• 将文档拆分成单独的标签/条目

要求

• Storybook
• TailwindCSS

安装

首先，安装该软件包。

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 中看到一个名为“主题”的新标签。🎉