New
I18n with StorybookAutomate with Chromatic
Star74,141
View full catalog
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon Add to the catalog
Tailwind Foundations
Storybook tailwind foundations from tailwind.config.js as stories
npm install storybook-tailwind-foundations
Last updated 27 days ago
242
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
5,777 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI