LOG 06 · ESTILOS
Tailwind CSS v4 en Producción
Tailwind v4 para un trabajo de maquetación rápido y consistente — combinado con CSS escrito a mano para las partes (apilamiento 3D, overlays de shaders personalizados, animación por keyframes) que necesitan un control a nivel de píxel que una clase de utilidad no puede expresar.
Publicado · Actualizado
Utilidades para la estructura, CSS para el detalle
Tailwind gestiona las partes de una maquetación que son genuinamente repetitivas — escalas de espaciado, estructura flex/grid, breakpoints responsive — de forma rápida, y sin inventar un nombre de clase nuevo para cada div. Pero las partes de un sitio que lo hacen sentir a medida en lugar de plantillado (una rampa de color oklch específica, una coreografía de z-index entre un canvas WebGL y una capa CSS3D, una animación por keyframes ajustada a mano) siguen siendo CSS escrito a mano, porque ahí es donde una clase de utilidad deja de ser más rápida que simplemente escribir las tres líneas de CSS directamente.
La configuración CSS-first de Tailwind v4 — propiedades personalizadas `@theme` reales en lugar de un objeto de configuración JS — hace que esa división sea más fácil de mantener: los mismos tokens de diseño (color, espaciado) son direccionables tanto desde las clases de utilidad como desde el CSS escrito a mano justo al lado.
Dónde termina la capa de utilidades
La división se ve con claridad en la práctica. El ritmo de la página — dirección del apilado, separaciones, breakpoints, anchos máximos — son utilidades, porque son las decisiones que se repiten en cada página y se benefician de una escala compartida. Todo lo que tiene una identidad concreta es una clase real en una hoja de estilos: el ritmo de encabezados que comparten el diario y los casos de estudio, los contadores en color de acento de una lista numerada, las líneas finas que separan un bloque de otro.
El color es el ejemplo más claro de por qué funciona esa división. La paleta está escrita en oklch en lugar de hex, porque la luminosidad perceptual es justo lo que se está ajustando cuando un color de cuerpo apagado tiene que quedar a una distancia precisa por debajo de un encabezado sobre un fondo casi negro. Esos valores viven como propiedades personalizadas, así que las clases de utilidad y las reglas escritas a mano leen de los mismos tokens en lugar de separarse con el tiempo.