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

标签 css angular tailwind-css

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

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

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

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

目前要么是我的 f.x. custom-component.css 被不同的组件样式污染,或者组件 html 被许多类污染。

BR

最佳答案

我用过 @ngneat/tailwind将 tailwindcss 添加到我的 angular 元素中,我可以使用 @apply在我的组件的 scss 文件中。
然而,似乎嵌套对我来说并不是一直有效,最重要的是,dark变体效果不佳( here is the explanation )。
Tailwind 关于组件的文档是为了避免使用自定义类,如果它很复杂并且只在一个组件中使用,则只将 Tailwind 类保留在 html 中。

关于css - Angular 组件特定样式以使用 tailwind @apply 函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60946951/

相关文章:

javascript - Tailwind CSS 使页脚始终位于页面底部

javascript - 如果声明是一个短语而不是一个特定的标题?

java - 未使用CSS样式且未读取列表

jquery - Angular 2 slider 范围 - 添加 Ion.RangeSlider 库

angular - 从 Angular 4 中的另一个组件访问组件方法

javascript - NextJs Tailwind build (purge) 移除所有样式

tailwind-css - 如何应用 Tailwind Typography 自定义颜色主题

css - 使用单个 Controller 控制两个 Partials 时不加载 Angular css 文件

javascript - 如果 CSS 中存在超过 3 个元素,如何在新行中自动格式化?

Angular 6库管道