¿Cómo usar Tailwind CSS con Angular?
En el mundo del desarrollo web, siempre se está buscando la manera de optimizar el trabajo y la eficiencia del diseño de interfaces (aunque a veces se complica más aún). Y como no podría ser de otra manera, Tailwind CSS se ha convertido en una herramienta que tiene un gran valor para los desarrolladores y diseñadores que la usan. ¿Pero qué es Tailwind CSS y por qué deberías considerar utilizarlo en tus proyectos de Angular?
Tabla de contenidos
¿Qué es Tailwind CSS?
Como acabamos de ver, Tailwind CSS es una herramienta, o framework CSS de código abierto que nos permite construir nuestras interfaces mediante clases utilitarias. Tailwind no nos proporciona componentes ya creados, como por ejemplo en Bootstrap, si no que nos da libertad para crearlos y darles el estilo que necesitemos y queramos.
Ventajas de Tailwind CSS
- Flexibilidad: Tailwind nos permite crear los estilos de manera rápida y sencilla, sin necesidad de escribir CSS adicional (que también lo puedes hacer en caso de que quieras).
- Productividad: Gracias a su enfoque de uso de clases utilitarias, ahorrarás mucho tiempo al no tener que tocar una línea de CSS mientras maquetas y creas tus proyectos.
- Mantenibilidad: Al usar clases utilitarias, el código tiende a ser más legible y mantenible. Aunque como mencioné antes, puede enrevesar las cosas y crear código desordenado.
- Personalización: Cómo te decía antes, Tailwind nos permite personalizar nuestro proyecto al máximo, adaptando así el diseño a tus necesidades específicas, mientras que en otros frameworks como Bootstrap, puede ser algo más tedioso.
Vale, ahora que te lo he vendido genial, vamos a ver como lo podemos instalar desde 0 y empezar a usarlo en nuestro proyecto de Angular.
Pasos para instalar Tailwind CSS en Angular 17
Vamos allá, ahora te voy a enseñar como instalar Tailwind CSS e integrarlo en tu proyecto de Angular.
Preparación del entorno
Para instalar Tailwind, necesitaremos el CLI de Angular. Posiblemente si ya has hecho proyectos en Angular lo tengas instalado, pero de todas maneras te recuerdo como hacerlo con este comando.
npm install -g @angular/cli
Con este comando instalarás Angular CLI de manera global, lo que te permitirá usar el comando «ng» para crear proyectos y demás operaciones.
Para crear un proyecto nuevo de Angular, puedes hacerlo con este comando.
ng new mi-app
Con esto crearás una nueva aplicación de nombre «mi-app», en la que deberíamos de tener estos archivos después de la instalación.
Instalación de Tailwind CSS
Ahora que ya tenemos nuestro proyecto de Angular creado, vamos a proceder a instalar Tailwind CSS en este.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
Al usar estos dos comandos estaremos instalando Tailwind CSS con el primer comando, y creando el archivo de configuración ‘tailwind.config.js’ con el segundo comando.
Ahora tendremos que añadir las rutas que usará Tailwind en nuestro proyecto, en el fichero tailwind.config.js:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{html,ts}",
],
theme: {
extend: {},
},
plugins: [],
}
El siguiente paso será añadir estas directivas de abajo en el fichero styles.css de nuestro proyecto de Angular (/src/styles.css).
@tailwind base;
@tailwind components;
@tailwind utilities;
Posteriormente, nos quedará nuestro fichero así:
Lo más complicado ya está hecho, ahora solo falta lanzar nuestro servidor de angular en local y ver como se ve nuestro proyecto, y lo puedes hacer con este comando:
ng serve
Esto creará un servidor en local en el puerto 4200, al que puedes acceder desde localhost:4200.
Y listo, ya tendrías Tailwind CSS. Ahora puedes ir al archivo app.component.html (src/app/app.component.html) y editar el HTML para crear tu proyecto y añadir clases de Tailwind.
Cuéntanos que te ha parecido el artículo en nuestras redes sociales, y si te ha gustado no dudes en compartir el artículo para que más gente descubra cómo usar Tailwind CSS con Angular 17. ¡Nos vemos!
