Soy estudiante de informática y estoy trabajando en un proyecto para mis estudios. Actualmente trato de desarrollar una biblioteca de componentes para el marco Angular usando Angular V12. Para diseñar, quiero usar Tailwindcss (especialmente porque me ahorra trabajar con consultas de medios en algunos puntos...). De todos modos, cuando construyo la biblioteca y la pruebo en otro proyecto, no se incluyen estilos de viento de cola.
Sé por los documentos de Tailwind que puedes usar algunas directivas o funciones como @apply en scss simple.
Para brindarle una mejor comprensión del problema, he vinculado el repositorio de github al código fuente de la biblioteca como referencia. Tengo un componente de botón que debería tener algunos estilos de viento de cola aplicados. Esto se hace especificando una clase para el elemento html llamado .btn . Esta clase se define dentro del archivo button.component.scss . También se hace referencia a este archivo en el archivo button.component.ts como styleUrl. Entonces mi pregunta es: ¿Cómo puedo solucionar el problema con los estilos que no se aplican usando @apply dentro de button.component.scss ?
Así es como se definen los estilos en button.component.scss :
.btn { @apply px-2 py-1 text-sm rounded-sm transition-all bg-placeholder-light hover:bg-placeholder active:bg-placeholder-dark relative border-2 border-transparent; } Esta clase .btn luego se aplica al elemento html de esta manera:
<button class="btn" (click)="clicked($event)"> <ng-content></ng-content> </button>Exportar esto no aplica las clases definidas previamente. Sin embargo, si aplico directamente los estilos en el atributo de clase así:
<button class="px-2 py-1 text-sm rounded-sm transition-all bg-placeholder-light hover:bg-placeholder active:bg-placeholder-dark relative border-2 border-transparent" (click)="clicked($event)"> <ng-content></ng-content> </button> Todo funciona como se esperaba. Esto parece un comportamiento muy extraño, ya que espero que el archivo button.component.scss se compile de alguna manera con los estilos correctos.
¿Hay alguna manera de solucionar este problema? ¿O tengo que adoptar un enfoque muy diferente? Sé que simplemente podría aplicar los estilos como en mi último ejemplo, pero quiero darles a los desarrolladores la opción de agregar clases como btn-primary (que agrega estilos adicionales).
Agradezco a todos de antemano por tomarse su tiempo para investigar mi problema. A ver si alguien me puede ayudar con ese problema.
¡Espero que tengas un gran día!
PD: El enlace al repositorio: https://github.com/z3ttee/alliance-ngx/tree/issue/tailwind/projects/alliance-ngx (es posible que desee utilizar el problema de la rama/tailwind)
Encontré una solución, digamos que el componente que publica se llama ui-components .
Modifique su configuración de viento de cola en el proyecto principal (el que usa su componente) para tener algo como esto:
module.exports = { content: ['./src/**/*.html', './src/**/*.ts', './node_modules/ui-components/**/*.{html,ts,js}'], variants: {}, plugins: [], corePlugins: { }, };