Estoy tratando de integrar Tailwind en un proyecto que requiere cierta personalización pero principalmente utiliza muchos componentes que provienen de sistemas de diseño existentes.
Quiero saber cómo apuntar y el elemento que se genera como descendiente del componente principal usando el viento de cola.
Aquí hay un escenario. Tengo un elemento de página y tiene un subcomponente de encabezado de página al que podemos acceder, pero el subcomponente de encabezado de página tiene un componente anidado con la clase 'separador de encabezado de página'.
<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>Por cierto, estoy usando angular. Esta no es una pregunta de sugerencia. Sé que puedo poner este selector específico en el estilo del componente. Pero ese no es mi punto. Esto es para comprender el viento de cola.
La pregunta es, ¿cómo puedo establecer un estilo directamente desde el encabezado de página hasta el separador de encabezado de página de destino?
Creo que agregaría los estilos necesarios a su archivo CSS principal y no intentaría aplicar los estilos en el html al padre.
Por lo general, las primeras tres líneas de su archivo css serán las tres directivas, y luego puede agregar los estilos dirigidos al elemento requerido.
@tailwind base; @tailwind components; @tailwind utilities; page-header page-header-separator { @apply text-2xl text-gray-900; }