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 dark mode
Toggle stories between light and dark mode using tailwind
npm install @jhaynie/storybook-tailwind-dark-mode
Last updated over 2 years ago
0
Downloads per week
Readme View on GitHub

storybook-tailwind-dark-mode

Example

Installation

Install the following npm module:

npm i --save-dev storybook-tailwind-dark-mode

or with yarn:

yarn add -D storybook-tailwind-dark-mode

Then, add following content to .storybook/main.js

module.exports = {
  addons: ['storybook-tailwind-dark-mode'],
};

Make sure tailwind is configured to use the darkmode class in the tailwind.config.js

module.exports = {
  darkMode: 'class',
  // ...
} 

Set Dark Mode as default

To set dark mode as default, Add the following lines of code to your preview.js file

const preview = {
  globalTypes: {
    darkMode: {
      defaultValue: true, // Enable dark mode by default on all stories
    },
    // Optional (Default: 'dark')
    className: {
      defaultValue: 'custom-classname', // Set your custom dark mode class name
    },
  },
};
Join the community
6,622 developers and counting
WhyWhy StorybookComponent-driven UI
DocsGuidesTutorialsChangelogTelemetryStatus
CommunityAddonsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI