加入直播会话:周四,美国东部时间上午 11 点,Storybook 9 发布及问答

Tailwind 深色模式

使用 tailwind 在明亮和深色模式之间切换故事

在 Github 上查看

storybook-tailwind-dark-mode

Example

安装

安装以下 npm 模块

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

或使用 yarn

yarn add -D storybook-tailwind-dark-mode

然后,将以下内容添加到 .storybook/main.js

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

确保 tailwind 在 tailwind.config.js 中配置为使用 darkmode 类

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

将深色模式设置为默认

要将深色模式设置为默认,请将以下代码行添加到您的 preview.js 文件中

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
    },
  },
};