85,947
返回集成
tailwindcss

集成Tailwind CSS与 Storybook

Tailwind CSS 是一个实用至上的 CSS 框架，其中包含大量类，可以直接在你的标记中构建任何设计。
前提条件

本食谱假设你有一个使用 Tailwind CSS 的 React 应用程序，并且刚刚使用入门指南设置了 Storybook >=7.0。 还没有设置？ 请按照 Tailwind 的安装说明进行操作，然后运行

# Add Storybook:
npm create storybook@latest

1. 配置 PostCSS

开始之前

Tailwind 使用 PostCSS 编译你的 CSS。 如果你正在使用

  • vite
  • @storybook/nextjs
  • @storybook/preset-create-react-app 和 react-scripts@2.0.0
  • @storybook/angular

那么你可以跳到下一步。

对于 Webpack 用户，你需要安装 @storybook/addon-styling-webpack 插件。

运行以下脚本安装并注册该插件

npx storybook@latest add @storybook/addon-styling-webpack

这将运行一个配置脚本，引导你完成插件的设置。 如果出现提示，请从配置选项中选择 PostCSS。

配置脚本失败了吗？

在底层，此命令运行 npx @storybook/auto-config styling，它负责读取你的项目并尝试为你的所需工具配置你的 Storybook Webpack。 如果直接运行该命令无法解决你的问题，请考虑在 @storybook/auto-config 仓库上提交错误报告，以便我们进一步改进它。 有关 PostCSS 的手动配置说明，你可以参考此处的文档。

2. 向 stories 提供 Tailwind

现在你可以将 tailwind.css 文件导入到你的 .storybook/preview.js 文件中。 这将使 Tailwind 的样式类可用于你的所有 stories。

// .storybook/preview.js
 
import '../src/tailwind.css'; // replace with the name of your tailwind css file

2.1. Angular

如果你正在使用 Angular，你需要将 tailwind.css 文件添加到你的 angular.json 文件中。 这将确保你的样式通过 PostCSS 处理，并注入到渲染你的 stories 的预览 iframe 中。

// angular.json
{
 "storybook": {
    "builder": "@storybook/angular:start-storybook",
    "options": {
      "browserTarget": "my-default-project:build",
      "styles": ["src/tailwind.css"]
    }
  } 
}

3. 添加主题切换器工具

Tailwind 开箱即用，自带浅色和深色主题。 你可以覆盖这些主题并添加更多主题。 为了充分利用你的 stories，你应该有一种方法可以在所有主题之间切换。

Finished example of Tailwind CSS in Storybook with a theme switcher

首先，更新你的 tailwind.config.js 文件，以基于类或 data-attribute 更改主题。 此示例使用 data-attribute。

// tailwind.config.js
 
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  // Toggle dark-mode based on .dark class or data-mode="dark"
  darkMode: ['class', '[data-mode="dark"]'],
  theme: {
    extend: {},
  },
  plugins: [],
};

接下来，安装 @storybook/addon-themes 插件以提供切换器工具。

运行以下脚本安装并注册该插件

npx storybook@latest add @storybook/addon-themes

这将运行一个配置脚本，引导你完成插件的设置。

配置脚本失败了吗？

在底层，这会运行 npx @storybook/auto-config themes，它应该读取你的项目并尝试使用正确的装饰器配置你的 Storybook。 如果直接运行该命令无法解决你的问题，请在 @storybook/auto-config 仓库上提交错误报告，以便我们进一步改进它。 要手动添加此插件，请安装它，然后将其添加到你的 .storybook/main.ts 中的 addons 数组中。

3.1. 通过类名切换主题

从 @storybook/addon-themes 向你的 Storybook 添加 withThemeByClassName 装饰器。

// .storybook/preview.js
import { withThemeByClassName } from '@storybook/addon-themes';
 
/* snipped for brevity */
 
export const decorators = [
  withThemeByClassName({
    themes: {
      light: 'light',
      dark: 'dark',
    },
    defaultTheme: 'light',
  }),
];

3.2. 通过 data-attribute 切换主题

从 @storybook/addon-themes 向你的 Storybook 添加 withThemeByDataAttribute 装饰器。

// .storybook/preview.js
import { withThemeByDataAttribute } from '@storybook/addon-themes';
 
/* snipped for brevity */
 
export const decorators = [
  withThemeByDataAttribute({
    themes: {
      light: 'light',
      dark: 'dark',
    },
    defaultTheme: 'light',
    attributeName: 'data-mode',
  }),
];

此代码将创建一个新的工具栏菜单，用于为你的 stories 选择所需的主题。

参与进来

现在你已准备好将 Tailwind 与 Storybook 一起使用。 🎉

如果你在工作中使用 Tailwind，我们很乐意得到你的帮助，使此设置更轻松。 加入 Discord 中的维护者以参与其中，或跳转到插件文档。

标签
贡献者
  • ShaunEvening
    ShaunEvening