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

Question

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

我从 tailwind 文档中了解到，您可以在纯 scss 中使用一些指令或函数，例如 @apply。

为了让您更好地理解这个问题，我已将 link 回购库 github 编辑到库的源代码以供参考。我有一个按钮组件，应该应用一些顺风样式。这是通过为名为 .btn 的 html 元素指定 class 来完成的。此 class 在 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 class 应用于 html 元素，如下所示：

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

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

<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 文件以某种方式以正确的样式编译。

有办法解决这个问题吗？还是我必须采取非常不同的方法？我知道我可以简单地应用上一个示例中的样式，但我想为开发人员提供添加 class 的选项，例如 btn-primary（添加其他样式）。

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

希望你今天过得愉快！

PS: link 到 repo: https://github.com/z3ttee/alliance-ngx/tree/issue/tailwind/projects/alliance-ngx (你可能想使用分支 issue/tailwind)

Answer 1

我找到了解决方案，假设您发布的组件名为 ui-components。

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

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

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

Angular v12 Component style files not compiling tailwindcss @apply

sass

angular

angular-library

tailwind-css