Frameworks CSS: Tailwind y Bootstrap

Tailwind es un framework utility-first: en lugar de componentes ya hechos, te da clases de una sola tarea, como p-4 (relleno), rounded-xl (esquinas), bg-white (fondo) o flex (distribución). El diseño sale de combinarlas, sin inventar nombres de clase ni cambiar de archivo.

Tailwind analiza tus archivos fuente (plantillas de Angular, componentes de React, HTML…) y genera solo el CSS de las clases que encuentra escritas. Por eso la hoja final suele ser pequeña, aunque existan miles de utilidades posibles.

Los valores salen de una escala común de espaciados, colores y tamaños de texto, de modo que el diseño queda coherente casi sin esfuerzo: es difícil que cada pantalla acabe con un gris distinto.

Una variante es un prefijo que condiciona la utilidad: hover:bg-sky-700 cambia el fondo al pasar el puntero, focus-visible:outline-2 dibuja el foco al navegar con el teclado y disabled:opacity-50 atenúa un botón desactivado. Puedes encadenarlas: dark:hover:bg-zinc-800.

El diseño responsive es mobile-first: una utilidad sin prefijo se aplica en todos los tamaños, y md: la sobrescribe a partir del breakpoint md (48rem por defecto) y hacia arriba. Así, flex-col md:flex-row apila en el móvil y pone en fila desde pantallas medianas.

dark: se aplica, por defecto, cuando el sistema del usuario está en modo oscuro (prefers-color-scheme). Si prefieres un botón que lo cambie a mano, redefine la variante en tu CSS con @custom-variant dark (&:where(.dark, .dark *)); y pasará a depender de una clase .dark.

En Tailwind v4 todo empieza con una línea de CSS: @import "tailwindcss";. Para personalizarlo, declaras variables dentro de un bloque @theme, y cada una crea sus utilidades: --color-marca-500 hace que existan bg-marca-500, text-marca-500 o border-marca-500.

Ya no necesitas el antiguo tailwind.config.js (se sigue admitiendo con la directiva @config, para proyectos que migran) ni una lista de archivos que analizar: Tailwind los detecta por su cuenta, ignorando lo que esté en tu .gitignore, y con @source añades rutas que no encuentre.

Además, las variables del tema existen como custom properties normales, así que también las usas en tu propio CSS con var(--color-marca-500). Esta app funciona así: su color de acento morado sale de un bloque @theme en su hoja de estilos global.

Bootstrap te da un catálogo de componentes con diseño propio: btn btn-primary es un botón completo, card una tarjeta y navbar una barra de navegación. También trae utilidades (mt-3, d-flex), pero su fuerte son las piezas ya montadas.

Algunos componentes necesitan comportamiento: abrir un modal, desplegar un menú, mostrar un tooltip. Bootstrap incluye su propio JavaScript, que se activa con atributos como data-bs-toggle="modal", y desde la versión 5 ya no depende de jQuery.

En Angular, en lugar de ese JavaScript, se suele usar ng-bootstrap o ngx-bootstrap: reimplementan los componentes como componentes de Angular y conservan el CSS de Bootstrap.

La rejilla (grid) de Bootstrap divide cada fila en 12 columnas. Envuelves el contenido en un .container, cada fila en un .row y cada celda en un .col-* que dice cuántas columnas ocupa: col-6 es la mitad y col-4, un tercio.

Como Tailwind, es mobile-first y tiene breakpoints: sm (576px), md (768px), lg (992px), xl (1200px) y xxl (1400px). col-12 col-md-6 col-lg-4 significa: ancho completo en el móvil, la mitad desde md y un tercio desde lg. Por debajo, usa flexbox.

Bootstrap está escrito en Sass, y casi todas sus decisiones de diseño son variables con !default: $primary, $border-radius, $font-family-sans-serif… Si les das otro valor antes de cargar Bootstrap, todo el framework se compila con tu marca, incluidos los tonos derivados.

Las versiones recientes también exponen custom properties con el prefijo --bs- (--bs-body-bg, --bs-link-color-rgb), que puedes cambiar sin recompilar, y admiten el modo oscuro con el atributo data-bs-theme="dark".