I am trying to integrate tailwind in a project that requires some customization but mainly uses a lot of components that comes from a existing design systems.
I want to know how to target and element that is generated as a descendant from the main component using tailwind.
Here is an scenario. I have a page element and it has a page-header sub component which we can access but page-header sub component has a nested component with class 'page-header-separator'.
<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>
By the way I am using angular. this is not a suggestion question. I know I can just put this specific selector in the component style. But that is not my point. This is for understanding tailwind.
Question is, how I can set a style from directly from page-header to target page-header-separator?
I think you would add the needed styles to your main CSS file and not try and apply the styles in the html to the parent.
So normally the first three lines of your css file will be the three directives, and after that you can add the styles targeting the required element.
@tailwind base;
@tailwind components;
@tailwind utilities;
page-header page-header-separator {
@apply text-2xl text-gray-900;
}