En los propios términos del Skill
Crea sistemas de diseño listos para producción sobre Tailwind CSS v4 (2024+). Recorre la configuración CSS-first, donde @theme en app.css sustituye a tailwind.config.ts, tokens de color semánticos escritos en OKLCH, tokens de radio y animación cuyos keyframes se ubican dentro de @theme, modo oscuro basado en clases declarado con @custom-variant, y estilos base aplicados en @layer base.
También expone la jerarquía de tokens, desde marca hasta semántico y componente, una arquitectura de componentes que recorre estilos base, variantes, tamaños, estados y overrides, además de patrones de componentes responsivos y accesibles. Escrito para equipos que crean una biblioteca de componentes, estandarizan patrones de UI en un código base o migran desde Tailwind v3.
Cómo funciona
- 01Importe Tailwind en el Punto de Entrada CSS
app.css comienza con un único @import en lugar de las directivas @tailwind base/components/utilities de v3.
- 02Declare el Conjunto de Tokens Semánticos Bajo @theme
Background, foreground, primary, secondary, muted, accent, destructive, border, ring y card se declaran todos como tokens de color en OKLCH.
- 03Agregue Tokens de Animación con Sus Keyframes
--animate-fade-in y --animate-fade-out se ejecutan en 0.2s, --animate-slide-in y --animate-slide-out en 0.3s, cada uno con un bloque @keyframes correspondiente declarado dentro de @theme.
- 04Sobrescriba los Mismos Nombres de Token Bajo .dark
El bloque dark reasigna cada token en lugar de introducir nombres nuevos, replicando background, foreground, primary, secondary, muted, accent, destructive, border, ring, card y ring-offset.
- 05Establezca los Valores Predeterminados de la Capa Base
@layer base aplica border-border a todos los elementos y le da al body el color de fondo, el color de primer plano y el antialiasing del tema.
- 06Construya Componentes en Orden de Capas
Los componentes avanzan a través de estilos base, variantes, tamaños, estados y overrides en ese orden.