Playground de text-box en CSS

Explora text-box con controles para recortar el espacio vertical de las fuentes y elegir los bordes métricos usados por el contenido de un botón.

HTML

<button class="text-box-button" type="button">Baseline</button>

Tailwind CSS

Algunas clases con valores arbitrarios pueden sustituirse por clases nativas, según el valor y la configuración de Tailwind CSS.

<button class="rounded-xl bg-linear-to-br from-violet-600 to-sky-500 px-5 py-3 font-bold text-white text-4xl leading-none [text-box:trim-both_cap_alphabetic]" type="button">Baseline</button>

CSS

.text-box-button {
  border: 0;
  border-radius: 12px;
  padding: 0.75rem 1.25rem;
  font: 700 2.25rem/1 system-ui, sans-serif;
  color: white;
  background: linear-gradient(135deg, #7c3aed, #0ea5e9);
  text-box: trim-both cap alphabetic;
}