Tailwind Autodocs 🎨

Design system documentation that comes directly from your tailwind config.

Demo: Storybook*

*This uses the tailwind.config.js file from this project

Features

• Automatically generates documentation from tailwind.config.js
• Works with Hot Module Reloading (HMR); so changes to your tailwind config are reflected in the storybook immediately
• Displays the theme colors and typography using Storybook's doc blocks

...and more features that are hopefully coming soon:

• Adding autodocs for tailwind spacing and screen break points
• Splitting up the documentation into separate tabs/entries

Requirements

• Storybook
• TailwindCSS v3.X (note that this is not yet compatible with v4)

Installation

First, install the package.

npm install --save-dev storybook-addon-tailwind-autodocs

Then, register it as an addon in .storybook/main.js, and specify your tailwind.config.js path there too.

// .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;

Then, run storybook with npm run storybook

And there you go! You should now see a new tab in your storybook called "Theme". 🎉