TailwindCSS 在应用程序中使用库时重复 CSS 类

Question

我有一个使用 Storybook 和 TailwindCSS 的组件库，以及一个也使用 TaildwindCSS 本身导入组件库的主机应用程序。生成类后，我发现它们是重复的：

这两个项目都在其文件中标准导入 TailwindCSS，index.css然后使用以下命令index.tsx导入 import "./index.css";：

导入时，主机应用程序确实会从组件库中生成所有类，但由于存在重复的类，一些类由于顺序而被覆盖（请注意上图中的源代码和行号）

该组件在故事书中看起来是正确的：

主机应用程序：

正在寻找有关如何在主机应用程序中正确导入组件库的建议？

更新：

我认为组件库会按预期生成它自己的 TailwindCSS 类，这就是“重复”类 ( inline) 的来源，并且它包含在文件夹index.js中的单个输出中dist。在主机应用程序中导入时，仍然需要一种方法来避免这些重复。可能需要考虑更改组件库以构建.css具有样式的单独文件，并告诉主机应用程序生成组件库的样式以防止这些重复。

Answer 1

在阅读了有关 TailwindCSS 文档的更多内容后，我找到了解决方案。使用https://tailwindcss.com/docs/content-configuration#working-with-third-party-libraries中的以下信息，我能够解决我的问题。

本质上，我现在所做的是，在我的组件库上，我确保样式.css被提取到它自己的文件中，而不是构建到单个index.js. 之后，在主机应用程序上，我将contenttailwind 配置设置为引用我的组件库，以便它扫描src并自行生成这些类。