异常行为：Tailwind CSS 与 React 项目中的 Bit.dev 组件集成

Question

我目前在将使用 Tailwind CSS 的 Bit.dev 组件集成到我的 React 项目中时遇到问题。尽管努力遵循 Bit.dev 博客中概述的步骤，我还是遇到了一个意想不到的问题。

上下文如下：我使用命令 bit new react my-proj -a teambit.react/react-env -d my.scope

 创建了一个初始 

Bit.dev 项目。接下来，我根据本博客中提供的说明配置了我的环境：集成 Tailwind CSS 和 Bit 以进行组件样式。

随后，我开发了一个具有样式的组件，其中

className="w-10 h-10",

执行了

bit tag

和

bit export

。有趣的是，Bit.cloud 上的预览显示该组件没有任何问题；样式类已正确应用。

但是，当我将这个 Bit.dev 组件导入到我的 React 项目（该项目已经正确设置了 Tailwind）时。该组件的行为不符合预期。 令人费解的是，当我尝试在 <div> 上创建一个带有“w-10 h-10”类的简单组件（遵循与

Bit.dev

组件相同的模式）时，突然之前的功能失效了 Bit.dev 组件开始按预期工作，具有适当的宽度和高度。

本质上，样式类似乎只有在另一个组件中使用时才起作用 - 例如，将样式应用到单独的

<div>

元素。

我还在 Bit 的 GitHub 存储库上发布了两个与我的投诉相关的问题。其中一个由于误解而关闭，而另一个在向我的 React 项目请求 Tailwind 配置代码和我的 Bit 项目的配置后仍然打开并等待响应。

• 问题 [#7750] 已关闭

• 问题[#7751]重新开放

如果你不介意的话也可以去那里看看并讨论一下。我已经有条理地说明了那里的情况

Answer 1

我意识到这个问题，你一定是

including node_modules/@your-bit-org in the content section of the Tailwind CSS configuration

添加此目录对于正确应用 React 项目中的 Bit.dev 组件中的样式类至关重要。

将您的位组件安装到 React 项目后，检查 node_modules 中组件的位置并将其添加到您的 tailwind 配置中

/** tailwind.config.js (in your react project) **/

export default {
  content: [
    './**/*.{jsx,tsx}',
    './node_modules/@your/components.**/*.{jsx,tsx}', //add this
  ],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
};