如何正确发布使用TailwindCSS样式的Angular公共组件库

方案一：组件库构建阶段预编译@apply（推荐） #

该方案可以保留你现有用@apply写样式的开发习惯，同时构建产物不包含@apply语法，主应用无需额外适配。

• 在Angular Library的构建流程中接入自定义webpack处理，在ng-packagr执行打包前，用postcss + tailwindcss处理器遍历处理所有组件的样式文件，提前把@apply语法转译为纯CSS规则。
• 组件库自身的tailwind.config.js中，content字段仅配置组件库本身的源码文件路径，构建阶段自动执行purge逻辑，仅保留组件实际用到的Tailwind样式，最终打包产物的styles字段无任何@apply语法。
• 组件用到的自定义主题变量（如示例中的bg-skin-fill）统一封装为CSS变量暴露，主应用仅需覆盖对应CSS变量即可实现主题定制，无需修改样式源码。
• 若需满足主应用purge覆盖库组件的需求，可在发布NPM包时附带组件源码的类名清单，或是将组件template、样式源码作为NPM包的可选导出，主应用仅需在自身tailwind.config.js的content字段中添加node_modules/你的组件库名称/**/*.{html,ts,css}即可，PurgeCSS会自动扫描识别库组件用到的类名。

方案二：主应用侧处理内联@apply语法 #

如果不想调整组件库的现有构建流程，可以选择在主应用侧做适配处理：

• 为主应用的Angular构建流程增加自定义postcss处理规则，匹配node_modules中对应组件库的js/ts产物文件，提取出组件元数据中styles数组内的CSS字符串，传入tailwindcss处理器完成@apply语法转译后再替换原内容。
• 具体可通过主应用的custom-webpack.config新增module规则实现，写简易自定义loader解析Angular组件元数据的styles字段，调用postcss处理后替换原有带@apply的样式内容即可。
• 该方案的缺点是所有接入该组件库的主应用都需要新增对应的构建配置，接入成本较高。

内容的提问来源于stack exchange，提问作者Max Coffer