Puente a Tailwind v4: tus tokens son la config

El último puente del curso cierra el círculo con el módulo 17. Tailwind v4 no es un framework de componentes, sino de ESTILOS — y su gran cambio es que ahora se configura con CSS, exactamente como tú definiste tus tokens. Vas a ver que aquel sistema de tokens que construiste a mano ES, casi literalmente, la configuración de Tailwind. Aprendiste Tailwind sin saberlo.

La fábrica que estampa tus piezas

Tus tokens del módulo 17 → el @theme de Tailwind

/* MÓDULO 17: tus tokens, usados a mano con var() */
:root {
--color-primary: #6d28d9;
--radio-md: 12px;
}
.boton { background: var(--color-primary); border-radius: var(--radio-md); }

/* TAILWIND v4: los MISMOS tokens en @theme → genera las utilidades */
@import "tailwindcss";
@theme {
--color-primary: #6d28d9;   /* → genera bg-primary, text-primary, border-primary */
--radius-md: 12px;          /* → genera rounded-md */
}

<!-- y ahora aplicas esos tokens como utilidades, directo en el HTML -->
<button class="bg-primary text-white rounded-md p-4">Acción</button>

Compara los dos bloques CSS: son el MISMO archivo de tokens. La única diferencia es que en Tailwind v4 van dentro de @theme, y a cambio Tailwind genera las clases de utilidad (bg-primary, rounded-md, p-4) que aplicas en el HTML —el enfoque utility-first del módulo 17—. Tu trabajo manual no se tira: se vuelve la configuración.

El círculo completo

Mini-reto

Toma el set de tokens que definiste en el reto del módulo 17 y "móntalo" en un @theme de Tailwind v4: pega tus --color-*, --radius-* dentro del bloque y anota, al lado de cada uno, qué utilidad generaría (--color-primary → bg-primary/text-primary). No necesitas Tailwind instalado: el ejercicio es VER que tu archivo de tokens ya ES una config de Tailwind. Llegarás a su curso con la mitad del camino hecho.

Fin del curso: eres diseñador-desarrollador

Cerraste "Maquetación Web Dinámica" completo. Empezaste sin saber qué pasa al escribir una URL, y ahora dominas el oficio entero: HTML semántico, CSS moderno, layouts, responsive, animación de nivel Awwwards, SVG, videojuegos, TypeScript, arquitectura de tokens, accesibilidad, rendimiento — y sabes cómo todo eso se transforma en React, Next, Astro, Angular y Tailwind. Construiste proyectos de portafolio reales y aprendiste a REVISARLOS como un profesional. Los puentes de este módulo son las puertas a los siguientes supercursos: elige el framework que te llame y sigue — pero ahora, con los cimientos que te hacen imparable. Bienvenido al oficio.