如何使用 Tailwindcss、ReactJS 和 Typescript 设置 Storybook

Question

如何设置 Storybook 以便它解析 Tailwindcss 样式并解析绝对路径？

注意：这是一个根据此允许的自记录问题/答案。这需要一段时间才能弄清楚，我相信很多其他人也会遇到这个问题。

Answer 1

为了解析 Storybook 中的路径，我们将使用 tsconfig 作为源。
我们假设您已经安装了带有 typescript 模板的 ReactJS 项目。

设置绝对路径

1. 在 typescript 中定义绝对路径

在 tsconfig.js 中的“paths”下添加绝对路径。

// tsconfig.json

{
  "compilerOptions": {
    // ...
    "baseUrl": "src",
    "paths": {
      "#assets/*": ["./assets/*"],
      "#components/*": ["./components/*"],
      // etc.
    }
  }
  "include": ["src"]
}

2. 扩展 tsconfig 绝对路径以在 Storybook 中工作

安装 tsconfig-paths-webpack -来自 npm 的插件。截至撰写本文时，每周下载量已达数百万次。

$ npm install -D tsconfig-paths-webpack-plugin
// or
$ yarn add -D tsconfig-paths-webpack-plugin

在 .storybook/main.js 下，通过将以下内容添加到 module.exports 来扩展 tsconfig 路径解析。

// .storybook/main.js

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
  // Add the following block of code in addition to what's existing
  "webpackFinal": async (config) => {
    config.resolve.plugins = [
      ...(config.resolve.plugins || []),
      new TsconfigPathsPlugin({
        extensions: config.resolve.extensions,
      }),
    ];
    return config;
  },
};

来源

3. 解析 Storybook

Add 中的 Tailwind 样式.storybook/preview.js 文件顶部的以下两行代码。

// .storybook/preview.js

import '!style-loader!css-loader!postcss-loader!tailwindcss/tailwind.css';
import 'tailwindcss/tailwind.css';

来源

您的 tailwindcss 现在应该解析。

其他文件

对于 Tailwind v3+，请确保您的 tailwind.config.js 没有清除选项并且没有明确声明 JIT。我的看起来像这样：

// tailwind.config.js

module.exports = {
    content: [
        "./src/**/*.{js,jsx,ts,tsx}"
    ],
    theme: {
        extend: {},
    },
    plugins: [],
};