Playground de text-transform en CSS

Explora text-transform con un selector para cambiar la capitalización visual del texto sin modificar el contenido HTML.

BaselineLab CSS text-transform mixed CASE, spanish accents, words-with-hyphens and 2026 labels. capitalize changes each word; uppercase and lowercase transform every cased letter.

HTML

<p class="text-transform-sample">
  BaselineLab CSS text-transform
  mixed CASE, spanish accents, words-with-hyphens and 2026 labels.
  capitalize changes each word; uppercase and lowercase transform every cased letter.
</p>

Tailwind CSS

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

<p class="max-w-2xl text-3xl font-bold leading-tight normal-case">
  BaselineLab CSS text-transform
  mixed CASE, spanish accents, words-with-hyphens and 2026 labels.
  capitalize changes each word; uppercase and lowercase transform every cased letter.
</p>

CSS

.text-transform-sample {
  max-inline-size: 42rem;
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: none;
}