Skip to main content

Configuración y diseño de sistema

Configurar no es personalizar, es formalizar decisiones​

La configuración no sirve para “tunear” Tailwind. Sirve para convertir decisiones implícitas en reglas explícitas.

Un proyecto sin configuración:

  • Decide colores “sobre la marcha”.
  • Ajusta spacing cuando algo no encaja.
  • Duplica soluciones sin darse cuenta.

Un proyecto con sistema:

  • Declara límites.
  • Reduce variaciones.
  • Hace visibles las decisiones.

Configurar es pasar de improvisar a gobernar.

Diseño de sistema antes que diseño visual​

Un sistema de diseño no empieza por componentes.

Empieza por tokens.

Tokens son:

  • Colores
  • Espaciados
  • Tipografía
  • Radios
  • Sombras

No representan estilos, representan intenciones reutilizables.

Ejemplo mental:

  • No “azul bonito”.
  • Sí “color de acción primaria”.

El archivo de configuración como contrato​

El archivo de configuración no es un detalle técnico. Es un contrato de equipo.

Define:

  • Qué valores existen.
  • Cuáles no.
  • Cuándo algo es una excepción.

Error frecuente:

  • Añadir valores “porque hace falta ahora”.
  • Convertir la config en un cajón desastre.

Una configuración crece hacia adentro, no hacia afuera.

Escalas coherentes y finitas​

Un sistema sano tiene pocas opciones bien pensadas, no infinitas.

Espaciado:

  • Debe seguir una progresión clara.
  • Debe cubrir la mayoría de casos reales.
  • Debe evitar valores “raros”.

Tipografía:

  • Pocos tamaños, bien jerarquizados.
  • Pesos definidos por función, no por gusto.

Color:

  • Paletas con roles.
  • Intensidades con propósito.
  • Contrastes previsibles.

Si todo es posible, nada es consistente.

Extender vs sobrescribir​

Configurar no es reemplazar Tailwind, es extenderlo con criterio. Buenas razones para extender:

  • Repetición real de valores.
  • Decisión de producto estable.
  • Lenguaje compartido por el equipo.

Malas razones:

  • Preferencia personal.
  • Ajuste puntual.
  • “Porque queda mejor”.

Componentes como consumidores del sistema​

Un componente bien diseñado:

  • No decide colores arbitrarios.
  • No inventa spacing.
  • No define tamaños aislados.

Consume el sistema.

No lo redefine.

Señal de alarma:

  • El mismo componente tiene variantes “hardcodeadas”.
  • Necesita excepciones constantes para encajar.

Si un componente no encaja en el sistema, el problema no es el componente.

Variantes como parte del sistema, no como parches​

Las variantes (size, tone, intent) no son condicionales sueltos.

Son dimensiones del sistema.

Ejemplo conceptual:

  • Un botón no tiene 7 estilos.
  • Tiene 1 estructura y varias intenciones.

El sistema define:

  • Qué variantes existen.
  • Cuáles no.
  • Qué combinaciones son válidas.

Documentar el sistema mientras se construye​

Un sistema no documentado no existe. Existe solo en la cabeza de quien lo creó.

Documentar no es escribir una wiki extensa. Es dejar ejemplos claros y límites visibles.

Buenas prácticas:

  • Mostrar uso correcto.
  • Mostrar uso incorrecto.
  • Explicar por qué.

Evitar el “framework dentro del framework”​

Un error común es construir un “mini-framework” encima de Tailwind:

  • Nombres propios para todo.
  • Abstracciones opacas.
  • Capa innecesaria entre HTML y decisión visual.

Resultado:

  • Menos legibilidad.
  • Más fricción.
  • Peor onboarding.

Tailwind ya es el framework.

El sistema es la capa de decisión, no de complejidad.

Señales de que necesitas un sistema (o ya lo rompiste)​

  • El mismo color aparece con valores distintos.
  • Los márgenes cambian sin patrón.
  • Nadie sabe qué tamaño usar.
  • Cada componente “resuelve a su manera”.
  • El diseño se degrada al crecer.

Errores frecuentes al empezar con diseño de sistema​

  • Empezar demasiado pronto.
  • Definir tokens sin casos reales.
  • Configurar todo desde el día uno.
  • No revisar ni refactorizar el sistema.
  • Tratar la config como intocable.

Este módulo introduce el quinto pilar del sistema: una interfaz sostenible no depende del talento individual, sino de reglas compartidas y explícitas.