无法使用 NPM 的 Rollup 将 React 组件与 Tailwind 一起打包

Question

背景：

我正在尝试为包含 Tailwind CSS 的 React 组件创建一个 NPM 包。安装包后，组件的 HTML 显示正确，但未应用 Tailwind 样式。我在没有 Tailwind 的情况下打包 React 组件没有任何问题。

问题：

在使用 Rollup 将组件与 Tailwind 捆绑在一起时，我观察到虽然 HTML 正确呈现，但 Tailwind 样式丢失了。经过更深入的检查，我注意到应该通过 styleInject() 嵌入到网页中的样式脚本似乎在 DevTools 中被截断。 DevTools 可能会在视觉上截断它，所以我不确定问题是否在那里。

相关代码：

我共享了包含以下代码的存储库。可能有助于调试的一些关键区域包括 package.json 和 rollup.config.js 文件。

https://github.com/adam-zakaria/vite-react-package-styled-install-here

https://github.com/adam-zakaria/vite-react-package-styled

https://www.npmjs.com/package/vite-react-package-styled?activeTab=code

要求：

我一直在努力解决这个问题一段时间，并且非常感谢社区可能提供的任何指导或解决方案。如果您以前做过此操作并且可以分享您的 rollup.config.js ，这可能会有所帮助。

Answer 1

在汇总配置更改中：

modules: true,  // Use CSS modules

至

modules: false,

然后再次构建项目，发布它，在使用项目中更新，然后重试。

Tailwind 按设计使用全局类名，并且使用 CSS 模块来确定类的范围，这在这里没有意义。