angular - 针对从设计系统自动生成的嵌套组件在 tailwind 中的特定后代元素类?

我正在尝试将 tailwind 集成到需要一些自定义但主要使用来自现有设计系统的大量组件的项目中。

我想知道如何定位和使用 tailwind 作为主组件的后代生成的元素。

这是一个场景。我有一个页面元素,它有一个我们可以访问的页面标题子组件,但页面标题子组件有一个嵌套组件,其类为“页面标题分隔符”。

<ds-page>
  <page-header>
    <!-- the item below is created from the design system, wanted to set a style with tailwind from page-header -->
    <page-header-separator>
    </page-header-separator>
  </page-header>
</ds-page>

顺便说一句,我正在使用 angular。这不是一个建议问题。我知道我可以将这个特定的选择器放在组件样式中。但这不是我的观点。这是为了理解tailwind。

问题是,如何直接从页眉设置样式到目标页眉分隔符?

回答1

我认为您会将所需的样式添加到您的主 CSS 文件中,而不是尝试将 html 中的样式应用于父级。

所以通常你的 css 文件的前三行将是三个指令,然后你可以添加针对所需元素的样式。

@tailwind base;
@tailwind components;
@tailwind utilities;

page-header page-header-separator {
  @apply text-2xl text-gray-900;
}