Tailwind css 类未显示在 Storybook 构建中

Question

我正在尝试用 Tailwind CSS 构建我的故事书。运行时，build-storybook组件将使用 tailwind 类呈现。不幸的是，当我构建故事书并运行创建构建时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 为您服务。

为了进行比较（请参阅下面的评论），以下是我构建的 Storybook-static 目录的内容：

Answer 2

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

解决方案 1：简单的解决方案

在.storybook/preview.js文件中添加此行来编译 tailwind 生成的 css 文件，如下所示 -

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

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

您还可以添加您的自定义 scss 文件（如果有） -

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

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

对于大多数人来说，这可以在 Tailwind 版本 > 3.0 中正常工作，没有任何问题。

解决方案 2：Kinda Hack 解决方案

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

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 3

我有类似的问题。我的问题通过添加以下内容解决： import "../src/index.css";到 .storybook/preview.js