Tailwind css 类未在 Storybook 构建中显示

Question

我正在尝试使用顺风 css 来构建我的故事书。当运行ning build-storybook 时，组件会顺风类渲染。不幸的是，当我构建故事书和运行创建构建 storybook-static 和 npx http-server storybook-static 时类没有加载到故事中，组件显示没有样式。

这是我项目的回购： https://gitlab.com/ens.evelyn.development/storybook-issue

这是我的 main.js :

    const path = require('path')

module.exports = {
  "stories": [
    "../src/components/**/**/*.stories.mdx",
    "../src/components/**/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    {
     name: '@storybook/addon-postcss',
     options: {
       postcssLoaderOptions: {
         implementation: require('postcss'),
       },
     },
   },        
   "@storybook/addon-actions",
    "storybook-tailwind-dark-mode"
  ]}

我的项目结构如下所示：

.storybook 
src
  components 
     subdir
       Button
         index.tsx
         button.stories.js 
  styles
    index.css (<-- tailwindcss file)

非常感谢任何提示或建议。

Answer 1

更新：我原来的回答可能对其他人有用，所以我会留下来供参考。但是，在这种情况下，问题出在 tailwind.config.js.

改变

purge: {
    mode: 'all',
    content: [
      './src/components/**/**/*.{ts, tsx}'
    ],
  },

到

purge: ['./src/**/*.{js,jsx,ts,tsx}'],

原文：

刚刚对其进行了测试，故事书的构建符合我的预期。我认为我们配置的主要区别在于我没有在 main.js 中更改 Storybook 的 webpack 配置。相反，我将 @storybook/addon-postcss 用于 postcss@^8（tailwind@^2 需要）：

// main.js
module.exports = {
  ...
  addons: [
    ...
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    },
  ],
};

我在 postcss.config.js 中指定了必要的插件（在我的项目根目录中）：

// postcss.config.js
module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  }

还值得注意的是，我直接在 Storybook 的 preview.js 中导入 Tailwind，而不是通过我自己的 css 文件：

// preview.js
import 'tailwindcss/tailwind.css';
export const parameters = {...}

希望这些更改能让 Tailwind 为您所用。

为了比较（见下面的评论），这里是我的构建故事书静态目录的内容：

Answer 2

我无法解决这个问题，上面的回答对我不起作用，所以我最终只是在构建后将我的构建故事书脚本设置为运行顺风本身。 package.json 个脚本最后看起来像这样：

"build-storybook": "build-storybook -s public && $(npm bin -g)/tailwindcss -i storybook-static/static/css/main.*.chunk.css -o storybook-static/static/css/main.*.chunk.css -m",

有点乱，但是 $(npm bin -g)/ 这里使用我全局安装的 (npm i -g tailwindcss) 版本的 tailwindcss，因为安装到项目的版本在我的构建中不起作用。

-i和-o指定输入输出文件，-m缩小输出。

我可以预见，如果构建了多个 CSS 文件，这会导致问题（也许使用 storybook-static/static/css/**/*.css 会起作用？），但这可能会帮助某些人开始工作。

Answer 3

由于 JIT 编译器，上述解决方案不适用于 Tailwind 版本 > 3.0。

Solution 1: Easy solution

在 .storybook/preview.js 文件中添加这一行来编译 tailwind 生成的 css 文件，就像这样 -

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

这里 tailwindcss/tailwind.css 是顺风 css 文件。看，重要的是我必须添加 !postcss-loader! 来编译顺风生成 css.

您也可以像这样添加您的自定义 scss 文件 -

import '!style-loader!css-loader!sass-loader!../src/scss/style.scss';

这里../src/scss/style.scss是自定义scss文件。

对于大多数人来说，这将在 Tailwind 版本 > 3.0 中正常工作。

Solution 2: Kinda Hack solution

在预览页面中创建自定义样式元素

import tailwindCss from '!style-loader!css-loader!postcss-loader!sass-loader!tailwindcss/tailwind.css';
const storybookStyles = document.createElement('style');
storybookStyles.innerHTML = tailwindCss;
document.body.appendChild(storybookStyles);

希望这对使用 Tailwind 的新 Tailwind 用户有帮助 v3.0。

Answer 4

如果您将故事书与 TSdx 和顺风一起使用 css 您应该能够将 CSS 导入组件

为了能够将您的 CSS 导入组件，您需要告诉 TSDX 如何将它包含在您的代码中。为此，您需要安装 rollup-plugin-postcss（因为 TSDX 使用汇总）。
在您的 src 目录中创建一个 CSS 文件，我们将在任何我们要在其中使用 Tailwind 的组件。

好的，现在让我们添加 rollup-plugin-postcss:

yarn add -D rollup-plugin-postcss

TSDX 是 fully customizable，您可以添加任何汇总插件，但请注意它会覆盖默认行为

现在您将创建一个

tsdx.config.js

// tsdx.config.js

const postcss = require('rollup-plugin-postcss');

module.exports = {
  rollup(config, options) {
    config.plugins.push(
      postcss({
        config: {
          path: './postcss.config.js',
        },
        extensions: ['.css'],
        minimize: true,
        inject: {
          insertAt: 'top',
        },
      })
    );
    return config;
  },
};

这给出了一个 postCSS 路径，它告诉它你想要它在什么文件上运行。最小化键是让你最小化输出。这里最重要的关键是“注入”。您将其设置为“顶部”以告诉 postCSS CSS 将插入我们页面的哪个位置。它对 Tailwind 至关重要，因为它需要拥有任何其他样式表的最高优先级。

接下来，对于第 2 部分，您将在 src 目录下创建一个 tailwind.css（可以命名为任何其他名称）文件并将其粘贴到：

// src/tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;

将 CSS 导入语句添加到您的组件

// src/Thing.tsx

import React, { FC, HTMLAttributes, ReactChild } from 'react';

// ! Add the CSS import statement !
import './tailwind.css`;

// ...

// we'll add some Tailwind classes on our components to test

export const Thing: FC<Props> = ({ children }) => {
  return (
    <div className="flex items-center justify-center w-5/6 m-auto text-2xl text-center text-pink-700 uppercase bg-blue-300 shadow-xl rounded-3xl">
      {children || `the snozzberries taste like snozzberries`}
    </div>
  );
};

Answer 5

以下配置将使 Tailwind 生成 CSS，因为新的 tailwind 类在开发模式（热重载）中添加到标记中。

总而言之，我认为@storybook/addon-postcss 不能与 Tailwind JIT 和 Storybook 热重载一起使用，解决方法是使用 postcss-loader webpack 加载器。

安装这些依赖：

@storybook/builder-webpack5 @storybook/manager-webpack5 postcss-loader webpack（必须是版本 5）

// .storybook/main.js
const path = require("path");

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    // {
    //   name: "@storybook/addon-postcss",
    //   options: {
    //     postcssLoaderOptions: {
    //       implementation: require("postcss"),
    //     },
    //   },
    // },
  ],
  framework: "@storybook/react",
  core: {
    builder: "webpack5",
  },
  webpackFinal: (config) => {
    config.module.rules.push({
      test: /\.css$/,
      use: [
        {
          loader: "postcss-loader",
          options: {
            postcssOptions: {
              plugins: [require("tailwindcss"), require("autoprefixer")],
            },
          },
        },
      ],
      include: path.resolve(__dirname, "../"),
    });
    return config;
  },
};

// .storybook/preview.js
import "../styles/globals.css";

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Tailwind css 类未在 Storybook 构建中显示

Tailwind css classes not showing in Storybook build

css

reactjs

storybook

tailwind-css

Tailwind css 类 未在 Storybook 构建中显示

Tailwind css classes not showing in Storybook build

css

reactjs

storybook

tailwind-css

Tailwind css 类未在 Storybook 构建中显示