Introducción
Angular es uno de los frameworks de desarrollo basados en js/ts más populares que existen en el mercado. Cualquier desarrollador que trabaje con él estará familiarizado con librerías de UI como Angular Material o Primeng. Personalmente encuentro Primeng más interesante por el grado de sofisticación de sus componentes y por cómo Material aporta una estética muy robusta, pero excesivamente común a sus resultados.
No obstante, Primeng no está exento de áreas de mejora si lo que pretendemos es prestar una atención al detalle. Además, no suele ser una buena práctica de cara al cliente final entregar un producto cuyo look and fill global parezca prefabricado. Es por ello que se antoja muy recomendable ir un paso más allá en su implementación para aprovechar todo su potencial sin desatender estos factores.
Por qué combinar Primeng con Tailwind
Lo primero que debes tener en cuenta a la hora de usar Primeng en un proyecto de Angular es que esta librería únicamente te va a aportar los componentes. Si deseas utilizar flexbox o grid, los propios desarrolladores de Primeng nos recomiendan instalar Primeflex como complemento. En este sentido podría parecer que Tailwind está de más y que su instalación va a suponer una carga extra de peso a nuestro aplicativo, pero nada más lejos de la realidad.
En mi experiencia, ambos ecosistemas pueden convivir sin complicaciones y la optimización de Tailwind ayuda a no disparar la cantidad de css de nuestro proyecto. A pesar de ello, deberemos hacer una instalación y uso de los recursos muy organizada si no queremos caer en problemas de compatibilidad. En los siguientes apartados te cuento cómo:
Instalación de Primeng
Antes de nada, partimos de la base de que cuentas con un proyecto de Angular creado y configurado sobre el que podamos trabajar
Instalaremos entonces Primeng como una dependencia de manera habitual abriendo una terminal en nuestro proyecto e introduciendo el comando
npm i primeng
Antes de incluir esta dependencia en nuestro archivo angular.json configuraremos nuestro propio tema.
Configurar tu propio tema de Primeng
Aunque en la carpeta de node_modules tendremos acceso directo a todos los temas de Primeng, si queremos una integración sin fricciones es necesario que descarguemos y referenciemos nuestro propio tema.
Para ello accederemos al siguiente repositorio oficial de temas de Primeng
Una vez allí descargaremos todos los documentos y los descomprimiremos. Si nos fijamos, encontraremos una distribución de archivos scss agrupados en carpetas tanto para temas dark como light y por códigos de colores.El tema que mejor nos va a funcionar es el de Tailwind. Esto no quiere decir que no podamos usar otros, simplemente nos va a requerir algo más de trabajo a la hora de estilizar algún componente concreto. Ten también en cuenta que el hecho de que en este momento el tema de Tailwind solo cuente con versión light, podremos cambiar esto.
Ahora que ya tenemos nuestro tema vamos a descomprimir la carpeta themes y theme_base en la carpeta assets de nuestro src
Estructura de directorios:
src/
└── assets/
└── theme_base
└── themes/
└── tailwind/
└── light
Referenciar los temas en nuestro angular.json
Ahora que ya tenemos todo lo que necesitamos simplemente vamos a asegurarnos de que los temas estén correctamente cargados. Tened en cuenta que al cambiar el archivo angular.json tendremos que bajar la aplicación y volverla a subir para ver los cambios
// angular.json
{
"projects": {
"architect": {
"styles": [
"src/styles.scss",
"src/assets/themes/tailwind/tailwind-light/theme.scss",
"node_modules/primeng/resources/primeng.min.css"
],
}
}
}
Instalación de Tailwind
Con estas configuraciones estaremos listos para trabajar con Primeng, además, tendremos acceso a todas las variables de estilos del tema. Procederemos ahora a instalar Tailwind
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
Una vez incluido en el proyecto abriremos ael archivo de configuración tailwind.config.js para asegurarnos de que luce así:
// tailwind.config.js
module.exports = {
content: ["./src/**/*.{html,ts}"],
darkMode: 'class',
theme: {
extend: {},
},
plugins: [],
}
Configura tus archivos de css
Hay un último paso que es fundamental para que todo funcione como esperamos. Aunque está más escondido de lo que me gustaría, si revisamos la documentación oficial de Primeng tendremos que añadir las siguientes líneas de css en nuestro archivo global de estilos
/*styles.scss*/
@layer tailwind-base, primeng, tailwind-utilities;
@layer tailwind-base {
@tailwind base;
}
@layer tailwind-utilities {
@tailwind components;
@tailwind utilities;
}
Con ello conseguiremos inicializar correctamente Tailwind pero, además, que las capas de css entre los temas se carguen en el orden necesario para que se respeten entre sí.
Personaliza tus componentes
Y por último, queda lo más importante. ¿Cómo vamos a utilizar ambas librerías conjuntamente?
Es importante hacer una buena configuración de nuestro tema personalizado que hemos descargado. La mayoría de los componentes aceptan fácilmente las clases de tailwind pero podemos ahorrar líneas de código si adaptamos nuestro color de acento global o eliminamos los atributos que aportan estilo a componentes como botones o formularios.
Hecha esta observación, te dejo un ejemplo sobre cómo renderizar un botón con estilos propios de tailwind y adaptados a la posibilidad de tener un tema oscuro:
<p-button (onClick)="changeTheme()" [link]="true" styleClass="dark:text-white text-slate-600 hover:bg-slate-200 hover:dark:bg-slate-600">
@if (!isDarkTheme()) {
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
</svg>
} @if(isDarkTheme()){
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
</svg>
}
</p-button>