CSS Moderno 2025: Tailwind, Grid y Características Nuevas

CSS hace 10 años: escribías clases, sufrías especificidad, arreglabas para móvil después.

CSS ahora: Tailwind, Grid, Container Queries. Completamente diferente.

Tailwind CSS es utility-first. En lugar de: ```css .button { background: blue; padding: 10px; border-radius: 5px; } ```

Escribes: ```html <button class="bg-blue-500 px-4 py-2 rounded-lg">Click</button> ```

Ventajas: - Nombres semánticos: bg-blue-500 vs color:#0066FF - Diseño consistente: colores, espaciado, tamaños estandarizados - DRY: no repites estilos - Dark mode: dark:bg-gray-800

CSS Grid es lo mejor que pasó a CSS.

Antes: floats (hacky), flexbox (1D solo).

Ahora: ```css .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; } ```

Automáticamente responsive. Sin media queries.

Container Queries: nuevo en 2024.

@container (width > 700px) { .card { grid-template-columns: 1fr 1fr; } }

Consultas basadas en contenedor, no viewport. Componentes realmente reutilizables.

Características modernas:

has(): selector padre. .input:has(+ .error) selecciona input si tiene hermano error después.

:where(): reduce especificidad. Útil para componentes.

oklch(): espacio de color perceptualmente uniforme. Mejor que RGB.

aspect-ratio: imagen mantiene proporción sin JavaScript. aspect-ratio: 16/9.

Cascade layers: @layer para control de especificidad. Reset < Utilities < Components.

En Leon Carpe Studios usamos Tailwind + Container Queries. Webs completamente responsive sin media queries. Componentes verdaderamente reutilizables.