Usar Tailwind CSS con Angular

Tailwind CSS es un framework CSS de utilidades que se puede usar para construir sitios web modernos sin salir de tu HTML. Esta guía te mostrará cómo configurar Tailwind CSS en tu proyecto Angular.

Configuración automatizada con ng add

Angular CLI proporciona una forma simplificada de integrar Tailwind CSS en tu proyecto usando el comando ng add. Este comando instala automáticamente los paquetes necesarios, configura Tailwind CSS y actualiza la configuración de compilación de tu proyecto.

Primero, navega al directorio raíz de tu proyecto Angular en una terminal y ejecuta el siguiente comando:

ng add tailwindcss

Este comando realiza las siguientes acciones:

• Instala tailwindcss y sus dependencias.
• Configura el proyecto para usar Tailwind CSS.
• Agrega la declaración @import de Tailwind CSS a tus estilos.

Después de ejecutar ng add tailwindcss, puedes comenzar inmediatamente a usar las clases de utilidad de Tailwind en las plantillas de tus componentes.

Configuración manual (Método alternativo)

Si prefieres configurar Tailwind CSS manualmente, sigue estos pasos:

1. Crear un proyecto Angular

Primero, crea un nuevo proyecto Angular si aún no tienes uno configurado.

ng new my-projectcd my-project

2. Instalar Tailwind CSS

A continuación, abre una terminal en el directorio raíz de tu proyecto Angular y ejecuta el siguiente comando para instalar Tailwind CSS y sus dependencias:

npm install tailwindcss @tailwindcss/postcss postcss

yarn add tailwindcss @tailwindcss/postcss postcss

pnpm add tailwindcss @tailwindcss/postcss postcss

bun add tailwindcss @tailwindcss/postcss postcss

3. Configurar los plugins de PostCSS

A continuación, agrega un archivo .postcssrc.json en la raíz del proyecto. Agrega el plugin @tailwindcss/postcss a tu configuración de PostCSS.

{  "plugins": {    "@tailwindcss/postcss": {}  }}

4. Importar Tailwind CSS

Agrega un @import a ./src/styles.css que importe Tailwind CSS.

@import "tailwindcss";

Si estás usando SCSS, agrega @use a ./src/styles.scss.

@use "tailwindcss";

5. Comenzar a usar Tailwind en tu proyecto

Ahora puedes comenzar a usar las clases de utilidad de Tailwind en las plantillas de tus componentes para estilizar tu aplicación. Ejecuta el proceso de compilación con ng serve y deberías ver el encabezado estilizado.

Por ejemplo, puedes agregar lo siguiente a tu archivo app.html:

<h1 class="text-3xl font-bold underline">  Hello world!</h1>

Recursos adicionales

• Documentación de Tailwind CSS