Aprende a extender el tema de Tailwind para crear un sistema visual propio y mantener consistencia en proyectos reales.
Cuando el proyecto crece, usar solo colores genéricos puede quedarse corto.
Extender el tema te permite definir tokens como brand, accent o spacing propio sin romper utility-first.
La idea no es inventar mil valores, sino crear una capa mínima y coherente para producto.
En esta lección vas a declarar una paleta personalizada y aplicarla en un bloque real.
Los tokens personalizados mejoran mantenibilidad y coherencia en equipos.
Si cada persona usa un azul distinto, la interfaz pierde identidad.
Con theme.extend puedes declarar una paleta oficial y reutilizarla en todo el proyecto.
También puedes centralizar tipografía o espaciados específicos de marca.
En demos puedes usar window.tailwind.config antes del script CDN.
Define pocos tokens con nombre claro y relación directa con diseño.
Empieza por color primario y secundario, no por 20 escalas nuevas.
Documenta qué token se usa para CTA, fondos o texto destacado.
Revisa contraste y estados hover/focus también con tokens custom.
Aprende a extender el tema de Tailwind para crear un sistema visual propio y mantener consistencia en proyectos reales.
Código del tema: Utilidades composables + responsive
Los tokens personalizados mejoran mantenibilidad y coherencia en equipos.
Si cada persona usa un azul distinto, la interfaz pierde identidad.
Con theme.extend puedes declarar una paleta oficial y reutilizarla en todo el proyecto.
También puedes centralizar tipografía o espaciados específicos de marca.
En demos puedes usar window.tailwind.config antes del script CDN.
<script>
tailwind.config = {
theme: {
extend: {
colors: {
brand: {
500: '#4f46e5',
400: '#6366f1'
}
}
}
}
}
</script>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>Define pocos tokens con nombre claro y relación directa con diseño.
Empieza por color primario y secundario, no por 20 escalas nuevas.
Documenta qué token se usa para CTA, fondos o texto destacado.
Revisa contraste y estados hover/focus también con tokens custom.