Tailwind 自動文件 🎨

直接來自您的 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 中看到一個名為「主題」的新標籤。🎉