Angular 组件特定样式以使用 tailwind @apply 函数

Question

大多数教程和文章都使用了在styles.scss中导入tailwind依赖项的方法

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

然后在 custom-components.css 或全局级别的某个单独文件中使用 @apply 函数编写自定义样式。

但是，如果我想在我的组件范围样式中使用带有顺风的 @apply 函数怎么办？那可能吗？

目前要么我的 fx custom-component.css 被不同的组件样式污染，要么组件 html 被许多类污染。

BR

Answer 1

我使用@ngneat/tailwind将 tailwindcss 添加到我的 Angular 项目中，我可以@apply在组件的 scss 文件中使用。

然而，似乎嵌套对我来说并不总是有效，最重要的是，dark变体也不起作用（这是解释）。

Tailwind 关于组件的文档是为了避免使用自定义类，如果 tailwind 类很复杂且仅在一个组件中使用，则只需将 tailwind 类保留在 html 中。