marnixGeerkens/rocketlauncher-claude-code

Patrones de Tailwind CSS (v4 - 2025)

CSS utilitario moderno con configuración CSS nativa.

---

1. Arquitectura de Tailwind v4

¿Qué cambió respecto a v3?

v3 (Legado)	v4 (Actual)
tailwind.config.js	Directiva CSS @theme
Plugin PostCSS	Motor Oxide (10x más rápido)
Modo JIT	Nativo, siempre activo
Sistema de plugins	Funcionalidades CSS nativas
Directiva @apply	Aún funciona, pero no se recomienda

Conceptos clave de v4

Concepto	Descripción
CSS-first	Configuración en CSS, no en JavaScript
Motor Oxide	Compilador en Rust, mucho más rápido
Anidamiento nativo	Anidamiento CSS sin PostCSS
Variables CSS	Todos los tokens expuestos como variables --*

---

2. Configuración Basada en CSS

Definición de Tema

@theme {
  /* Colores - usa nombres semánticos */
  --color-primary: oklch(0.7 0.15 250);
  --color-surface: oklch(0.98 0 0);
  --color-surface-dark: oklch(0.15 0 0);
  
  /* Escala de espaciado */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  
  /* Tipografía */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

Cuándo Extender vs Sobrescribir

Acción	Úsalo Cuando
Extender	Agregar nuevos valores junto a los predeterminados
Sobrescribir	Reemplazar completamente la escala predeterminada
Tokens semánticos	Nombres específicos del proyecto (primary, surface)

---

3. Consultas de Contenedor (Nativas en v4)

Punto de quiebre vs Contenedor

Tipo	Responde A
Punto de quiebre (md:)	Ancho del viewport
Contenedor (@container)	Ancho del elemento padre

Uso de Consultas de Contenedor

Patrón	Clases
Definir contenedor	@container en el elemento padre
Punto de quiebre de contenedor	@sm:, @md:, @lg: en los hijos
Contenedores con nombre	@container/card para especificidad

Cuándo Usar

Escenario	Uso
Diseños a nivel de página	Puntos de quiebre del viewport
Responsive a nivel de componente	Consultas de contenedor
Componentes reutilizables	Consultas de contenedor (independientes del contexto)

---

4. Diseño Responsive

Sistema de Puntos de Quiebre

Prefijo	Ancho Mínimo	Objetivo
(ninguno)	0px	Base mobile-first
sm:	640px	Teléfono grande / Tablet pequeña
md:	768px	Tablet
lg:	1024px	Laptop
xl:	1280px	Escritorio
2xl:	1536px	Escritorio grande

Principio Mobile-First

1. Escribe estilos para móvil primero (sin prefijo)
2. Agrega anulaciones para pantallas más grandes con prefijos
3. Ejemplo: w-full md:w-1/2 lg:w-1/3

---

5. Modo Oscuro

Estrategias de Configuración

Método	Comportamiento	Úsalo Cuando
class	La clase .dark alterna	Selector de tema manual
media	Sigue la preferencia del sistema	Sin control del usuario
selector	Selector personalizado (v4)	Temas complejos

Patrón de Modo Oscuro

Elemento	Claro	Oscuro
Fondo	bg-white	dark:bg-zinc-900
Texto	text-zinc-900	dark:text-zinc-100
Bordes	border-zinc-200	dark:border-zinc-700

---

6. Patrones de Diseño Modernos

Patrones Flexbox

Patrón	Clases
Centrar (ambos ejes)	flex items-center justify-center
Pila vertical	flex flex-col gap-4
Fila horizontal	flex gap-4
Espacio entre	flex justify-between items-center
Cuadrícula envolvente	flex flex-wrap gap-4

Patrones Grid

Patrón	Clases
Autocompletado responsive	grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))]
Asimétrico (Bento)	grid grid-cols-3 grid-rows-2 con expansiones
Diseño con barra lateral	grid grid-cols-[auto_1fr]

Nota: Prefiere diseños asimétricos/Bento sobre cuadrículas simétricas de 3 columnas.

---

7. Sistema de Color Moderno

OKLCH vs RGB/HSL

Formato	Ventaja
OKLCH	Uniforme perceptual, mejor para diseño
HSL	Tono/saturación intuitivo
RGB	Compatibilidad heredada

Arquitectura de Tokens de Color

Capa	Ejemplo	Propósito
Primitiva	--blue-500	Valores de color puros
Semántica	--color-primary	Nombres basados en propósito
Componente	--button-bg	Específico del componente

---

8. Sistema de Tipografía

Patrón de Conjuntos de Fuentes

Tipo	Recomendado
Sans	'Inter', 'SF Pro', system-ui, sans-serif
Mono	'JetBrains Mono', 'Fira Code', monospace
Display	'Outfit', 'Poppins', sans-serif

Escala Tipográfica

Clase	Tamaño	Uso
text-xs	0.75rem	Etiquetas, leyendas
text-sm	0.875rem	Texto secundario
text-base	1rem	Texto del cuerpo
text-lg	1.125rem	Texto destacado
text-xl+	1.25rem+	Encabezados

---

9. Animaciones y Transiciones

Animaciones Integradas

Clase	Efecto
animate-spin	Rotación continua
animate-ping	Pulso de atención
animate-pulse	Pulso de opacidad sutil
animate-bounce	Efecto de rebote

Patrones de Transición

Patrón	Clases
Todas las propiedades	transition-all duration-200
Específico	transition-colors duration-150
Con aceleración	ease-out o ease-in-out
Efecto hover	hover:scale-105 transition-transform

---

10. Extracción de Componentes

Cuándo Extraer

Señal	Acción
Misma combinación de clases 3+ veces	Extraer componente
Variantes de estado complejas	Extraer componente
Elemento del sistema de diseño	Extraer + documentar

Métodos de Extracción

Método	Úsalo Cuando
Componente React/Vue	Dinámico, se necesita JS
@apply en CSS	Estático, no se necesita JS
Tokens de diseño	Valores reutilizables

---

11. Anti-Patrones

No Hacer	Hacer
Valores arbitrarios por todas partes	Usar la escala del sistema de diseño
!important	Arreglar la especificidad correctamente
style= en línea	Usar utilidades
Duplicar listas largas de clases	Extraer el componente
Mezclar configuración v3 con v4	Migrar completamente a CSS-first
Usar @apply en exceso	Preferir componentes

---

12. Principios de Rendimiento

Principio	Implementación
Purgar no utilizado	Automático en v4
Evitar dinamismo	Sin clases en cadenas de plantilla
Usar Oxide	Predeterminado en v4, 10x más rápido
Almacenar en caché	Caché en CI/CD

---

Recuerda: Tailwind v4 es CSS-first. Adopta variables CSS, consultas de contenedor y funcionalidades nativas. El archivo de configuración ahora es opcional.