"Angular v12 组件样式文件不编译tailwindcss @apply"

Question

我是计算机科学专业的学生，​​我正在研究一个项目。 我目前尝试使用 Angular V12 为 Angular 框架开发组件库。 对于样式我想使用 Tailwindcss （特别是因为它让我在某些点上处理媒体查询......）。 无论如何，当我构建库并在另一个项目中测试它时，没有包含顺风样式。

我从顺风文档中知道，您可以在普通 scss 中使用一些指令或函数，例如 @apply。

为了让您更好地理解这个问题，我将 github 存储库链接到库的源代码以供参考。 我有一个按钮组件，应该应用一些顺风样式。 这是通过为名为.btn的 html 元素指定一个类来完成的。 此类在button.component.scss文件中定义。 该文件在button.component.ts文件中也被引用为 styleUrl。 所以我的问题是：如何解决未在button.component.scss中使用@apply应用样式的问题？

这是在button.component.scss中定义样式的方式：

.btn {
  @apply px-2 py-1 text-sm rounded-sm transition-all bg-placeholder-light hover:bg-placeholder active:bg-placeholder-dark relative border-2 border-transparent;
}

然后将此.btn类应用于 html 元素，如下所示：

<button class="btn" (click)="clicked($event)">
    <ng-content></ng-content>
</button>

导出它不会应用之前定义的类。 但是，如果我像这样直接应用类属性中的样式：

<button class="px-2 py-1 text-sm rounded-sm transition-all bg-placeholder-light hover:bg-placeholder active:bg-placeholder-dark relative border-2 border-transparent" (click)="clicked($event)">
    <ng-content></ng-content>
</button>

一切都按预期工作。 这似乎是一个非常奇怪的行为，因为我期望button.component.scss文件以某种方式以正确的样式编译。

有没有办法解决这个问题？ 还是我必须采取非常不同的方法？ 我知道我可以简单地应用上一个示例中的样式，但我想让开发人员可以选择添加像btn-primary这样的类（它添加了额外的样式）。

我提前感谢大家花时间研究我的问题。 希望有人可以帮助我解决这个问题。

希望你有一个美好的一天！

PS：repo的链接： https ://github.com/z3ttee/alliance-ngx/tree/issue/tailwind/projects/alliance-ngx（你可能想使用分支问题/tailwind）

Answer 1

我找到了一个解决方案，假设您发布的组件称为ui-components<\/code> 。

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

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