Tailwind css 类未在 Storybook 构建中显示

Posted 2023-02-19

【中文标题】Tailwind css 类未在 Storybook 构建中显示

【英文标题】：Tailwind css classes not showing in Storybook build

【发布时间】：2021-09-02 08:07:19

【问题描述】：

我正在尝试使用顺风 css 构建我的故事书。运行build-storybook 时，组件使用顺风类呈现。不幸的是，当我构建故事书并使用npx http-server storybook-static 运行创建构建storybook-static 时，类未加载到故事中，并且组件显示时未设置样式。

这是我的项目的 repro repo： 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)

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

【问题讨论】：

你的其他风格怎么样？

@Pytth 我目前只使用 tailwindcss，所以我唯一的样式位于 src/styles/index.css

【参考方案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 为您工作。

为了比较（见下面的 cmets），这里是我的 build storybook-static 目录的内容：

【讨论】：

感谢您的努力。不幸的是，这种方法对我也不起作用。我的 tailwindcss.css 文件的位置或命名有什么不同吗？

我认为我们需要查看 Storybook 的默认 Webpack 配置。我很惊讶您的 index.css 被复制到构建目录中。我会将我构建的 storybook-static 的内容附加到我的答案中以进行比较。

如果你发布一个repro repo，我可以看看。

知道了：我会在上面的答案中添加。

很高兴我能帮上忙 :) 顺便说一句，我已经将一个 repo 推送到 Github，并进行了一些可能有用的更改：1) 我建议使用 Tailwind 的新 JIT 模式； 2）您的 tsconfig 包含的内容有些损坏； 3) 我在 Typescript 中加入了一个写故事的模式：github.com/jcamden/SO-68020712-revised/commit/…

【参考方案2】：

我无法解决这个问题，上面的回答对我不起作用，所以我最终只是将我的 build-storybook 脚本设置为在构建后自行运行 tailwind。 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 可以代替？），但这可能有助于某人让某些东西正常工作。