¿Qué combinación mejora más la legibilidad en un bloque oscuro?

Un fondo oscuro con texto claro genera contraste suficiente para lectura cómoda.

Colores, tipografía y espaciado: los cimientos visuales

Domina las utilidades básicas de Tailwind para construir jerarquía visual con color, texto y spacing sin escribir CSS adicional.

¿Cuánto sabes de Tailwind CSS?

📘 Teoría

Color con intención, no por impulso

Trabaja con escalas como slate, indigo o emerald para mantener consistencia entre pantallas.

Usar tonos como bg-slate-900 y text-slate-200 genera contraste legible sin llegar al blanco puro en todo.

Los acentos funcionan mejor cuando son puntuales: por ejemplo, un botón en indigo-500 y una etiqueta en emerald-300.

Piensa siempre en estados: color base, hover y foco, para no dejar la UX a medias.

Define un fondo principal y un color de texto base.
Reserva colores fuertes para acciones o avisos.
Evita mezclar demasiadas familias de color en un mismo bloque.

Jerarquía tipográfica en 3 niveles

Con pocas utilidades puedes guiar la lectura: título, cuerpo y meta información.

Espaciado que ordena la interfaz

Tailwind usa una escala de spacing que te ayuda a mantener ritmo vertical y horizontal.

Si mezclas valores aleatorios, el diseño se siente roto aunque los colores sean buenos.

Aplicar p-6 al contenedor, mt-2 entre título y texto, y mt-5 antes de acciones suele dar un resultado limpio.

Mantén la repetición de espacios para que distintos bloques se perciban del mismo sistema.

1 Color con intención, no por impulso 2 Jerarquía tipográfica en 3 niveles 3 Espaciado que ordena la interfaz

🧪 Aprende probando

Ejemplo Demo: tarjeta con jerarquía visual Practica color, tipografía y spacing en un único bloque reutilizable.

⌄

Ejemplo Demo interactiva: laboratorio de tipografía y spacing Explora cómo cambian jerarquía, acento y ritmo visual cuando ajustas solo unas pocas utilidades.

⌄

Ejemplo Demo interactiva: tipografía avanzada y legibilidad Practica `text-*`, `font-*`, `leading`, `tracking`, `truncate` y `line-clamp` en contexto real.

⌄