CSS text-transform playground

Explore text-transform with a selector for changing visual capitalization without editing the HTML content.

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

Some classes with arbitrary values can be replaced by native classes, depending on the value and your Tailwind CSS configuration.

<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;
}