发布使用 TailwindCSS 样式的 Angular 库的最佳方式是什么？

Question

目标是将组件模块创建为Angular 库，并将其与主应用程序分开。因此，组件库作为独立包发布到 NPM，然后可以导入到不同的应用程序中。使用 Tailwind 实用程序编写的组件样式@apply- https://tailwindcss.com/docs/extracting-components

请购单

• 组件库和主应用程序都使用 Tailwind CSS。
• Tailwind purge(PurgeCSS) 应该应用于最终项目，包括来自外部库的组件。

问题

我在使用TailwindCSS库中的组件样式时遇到问题，因为最终的 AMD 和 ES2015 版本包含内联样式，无法通过主应用程序中的 Tailwind 配置进行处理。

当我在同一个主项目中本地使用 Angular 库时，它就非常有效（请参阅组件“本地演示”的示例）。但是，当我将库发布为 NPM 包时，类与实用程序一起内联到模块中@apply，无法正确处理。

发布的库组件代码示例（ES2015模块）：

styles: ["@layer components{.first-component-base {@apply w-full;} .first-component-base.first-component-disabled {@apply opacity-50;} .first-component-base .first-component-wrapper {@apply rounded-lg bg-skin-fill;} .first-component-base .first-component-wrapper .first-component-block {@apply max-w-7xl mx-auto py-3 px-3 sm:px-6 lg:px-8;} .first-component-text {@apply ml-3 font-medium text-white truncate;}}\n"]

如您所见，@apply如果您将组件库添加为 NPM 包，则构建的模块样式包含主应用程序的 Tailwind 配置无法处理的样式。

源代码示例和自述文件 - https://github.com/maxcoffer/angular-tailwind-library

可能的解决方案

这是我到目前为止所尝试过的，或者作为示例进行测试的，但它的工作效果并不完全完美或者有自己的缺点。

1. 使用组件提取作为 TailwindCSS plugin（请参阅文档） - 非常痛苦，因为您没有对该方法的智能感知支持，并且您需要在 JS/TS 中编写可以包含在 Tailwind 配置中的所有样式。

2. 使用内联 Tailwind 类名而不是带有@apply- 的组件提取在某些时候确实有效，直到您拥有具有动态行为样式的复杂组件（这就是我使用 SCSS 和 的原因@apply）。

3. 像其他人一样编写它，在 JS/TS 中使用 CSS，甚至使用 JS 对象为每个组件创建配置 - 同样，没有智能感知，没有 SCSS，无法使用标准组件样式方法编写样式。

问题

您能否建议如何@apply在制作组件时使用实用程序（或任何其他无需大量自定义的有效方法），同时在 NPM 包构建过程中提取 Tailwind 类？或者如何@apply从主应用程序级别的模块中提取内联？

Answer 1

我找到了一个解决方案，虽然有点麻烦，但它确实有效。假设您发布的组件名为ui-components.

修改父项目（使用您的组件的项目）上的 tailwind 配置，使其具有如下内容：

module.exports = {
  content: ['./src/**/*.html', './src/**/*.ts', './node_modules/ui-components/**/*.{html,ts,js}'],
  variants: {},
  plugins: [],
  corePlugins: {
  },
};