Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Tailwind Foundations
Storybook tailwind foundations from tailwind.config.js as stories
npm install storybook-tailwind-foundations
Last updated over 1 year ago
11.3k
Downloads per week
Readme View on GitHub

Getting Started

Links

Example

Requirements

  • Vue 3.0+
  • Tailwind CSS
  • Storybook

Install package

npm install storybook-tailwind-foundations

Adapt ./storybook/main.js

const path = require('path');
const tailwindConfigPath = path.join(__dirname, '../tailwind.config.js'); // or your own config file
require('storybook-tailwind-foundations/initialize.js')
  .default(tailwindConfigPath);

module.exports = {
   // ...
  stories: [
    // ... 
    '../node_modules/storybook-tailwind-foundations/**/*.stories.js'
  ],
}

Start Storybook

If you make any change to the tailwind config, you need to restart storybook to see the changes. Now you can start storybook and the Foundations section should appear in the sidebar.

Join the community
6,561 developers and counting
WhyWhy StorybookComponent-driven UI
DocsGuidesTutorialsChangelogTelemetryStatus
CommunityIntegrationsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI