Parte 3: GIFs App

Esta página es una parte de la guía de estudio; allí están el mapa general y la ruta recomendada. La Parte 2, sobre las bases de Angular, está en 02-bases. Proyecto: 03-gifs-app/.

Es una aplicación Angular 22 creada con ng new, con SCSS para los estilos de cada componente y Tailwind CSS para las clases de utilidad.

---

Módulo G1: Instalar Tailwind CSS en un proyecto con SCSS

El problema que resuelve

Quieres escribir class="text-3xl font-bold" en el HTML y que funcione, sin crear un archivo de estilos para cada detalle. Eso es Tailwind CSS: una colección de clases pequeñas (utility classes), cada una con un solo trabajo. El proyecto ya usa SCSS, y la pregunta es si pueden convivir. Sí pueden, con un cuidado.

Cómo se instala

Tailwind v4 se instala como un plugin de PostCSS (la herramienta que procesa el CSS después de escribirlo). Angular ya sabe leer su configuración.

1. Instala los paquetes dentro de 03-gifs-app/:

npm install tailwindcss @tailwindcss/postcss postcss

1. Crea .postcssrc.json en la raíz del proyecto, para decirle a Angular que use el plugin:

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

1. Crea src/tailwind.css con una sola línea:

@import "tailwindcss";

1. Cárgalo en angular.json, antes de tu SCSS:

"styles": [
  "src/tailwind.css",
  "src/styles.scss"
]

1. Reinicia ng serve y prueba una clase en app.html:

<h1 class="text-3xl text-blue-500 font-bold">Welcome to the GIFs App</h1>

Por qué un archivo .css aparte

La primera idea es escribir @import "tailwindcss"; dentro de styles.scss. Funciona, pero Sass cree que ese @import es suyo y avisa que esa forma está obsoleta (deprecated) y desaparecerá en una versión futura. Para evitar el aviso, el import de Tailwind va en un archivo .css, que Sass no toca, y styles.scss queda para tus estilos propios.

angular.json
   │
   ├── src/tailwind.css ──► PostCSS + Tailwind ──┐
   │                                             ├──► styles.css final
   └── src/styles.scss ───► Sass ────────────────┘

SCSS y Tailwind juntos

• Las clases de Tailwind se usan directo en el HTML. No hace falta tocar el .scss del componente.
• Dentro del .scss de un componente, @apply y @theme no funcionan solos, porque ese archivo no sabe qué es Tailwind. Si los necesitas, empieza el archivo con @reference "tailwindcss";.
• Después de cambiar .postcssrc.json o angular.json, reinicia ng serve: Angular los lee sólo al arrancar.

Errores comunes

• Poner @import "tailwindcss" en styles.scss: da el aviso de Sass.
• Olvidar agregar src/tailwind.css a styles en angular.json: las clases no hacen nada y no hay error.
• No reiniciar ng serve tras crear .postcssrc.json.

Resumen

Tailwind v4 = tres paquetes + .postcssrc.json + un .css con su import, cargado desde angular.json. SCSS sigue igual para lo propio de cada componente.

Preguntas de entrevista

1. ¿Por qué @import "tailwindcss" va en un .css y no en el .scss?

Respuesta:

Porque Sass interpreta el @import antes de que Tailwind lo vea, y esa sintaxis está obsoleta en Sass (se eliminará en Dart Sass 3). En un .css, el import llega intacto a PostCSS, que es quien lo entiende. Por eso los dos archivos se listan por separado en styles de angular.json.

2. ¿Para qué sirve .postcssrc.json?

Respuesta:

Es donde Angular busca los plugins de PostCSS que debe aplicar al CSS. Ahí se registra @tailwindcss/postcss, que convierte @import "tailwindcss" en las clases de utilidad. Sin ese archivo, Tailwind no se ejecuta y las clases quedan sin efecto.

3. ¿Puedo usar @apply en el .scss de un componente?

Respuesta:

No directamente. Cada .scss de componente se compila por separado y no conoce Tailwind. Hay que declarar @reference "tailwindcss"; al inicio del archivo para que sepa qué clases existen, y aun así lo más simple es poner las clases en el HTML.

4. ¿Qué ventaja y qué costo tiene Tailwind frente a escribir SCSS?

Respuesta:

La ventaja es la velocidad y la consistencia: los valores (espacios, colores, tamaños) salen de una escala común y no inventas nombres de clases. El costo es que el HTML se llena de clases largas, y repetirlas en varios lugares obliga a extraer un componente. SCSS sigue siendo mejor para estilos muy específicos de un componente.