Tailwind CSS Text Transform Cheatsheet

Complete reference for Tailwind v4 text-transform utilities.
Click any example to copy the class name.

All Text Transform Classes

Four utilities for controlling text capitalization

Interactive Demo

Type your own text to see how each transform affects it

Enter your text:

Side-by-Side Comparison

Original Text	uppercase	lowercase	capitalize
Hello World	Hello World	Hello World	Hello World
ALREADY CAPS	ALREADY CAPS	ALREADY CAPS	ALREADY CAPS
already lower	already lower	already lower	already lower
mIxEd CaSe	mIxEd CaSe	mIxEd CaSe	mIxEd CaSe

Note: capitalize only affects the first letter of each word. It does not lowercase the rest.

Common Use Cases

Navigation Links

<nav>
  <a class="uppercase tracking-wide
    text-sm font-semibold">
    Home
  </a>
  <a class="uppercase tracking-wide
    text-sm font-semibold">
    About
  </a>
</nav>

Button Labels

<button class="uppercase
  font-bold tracking-wider
  px-6 py-3 bg-primary">
  Submit Form
</button>

Section Headings

<h2 class="uppercase text-xs
  font-bold tracking-widest
  text-gray-500 mb-4">
  Latest Articles
</h2>

Title Case Names

{/* User input normalization */}
<span class="capitalize">
  {userName.toLowerCase()}
</span>

{/* Result: "john doe" → "John Doe" */}

Email Addresses

<a href="mailto:..."
  class="lowercase text-primary">
  Contact@Example.COM
</a>

{/* Displays: contact@example.com */}

Reset Inherited Transform

<div class="uppercase">
  ALL CAPS SECTION
  <span class="normal-case">
    But this is normal
  </span>
</div>

Responsive & State Variants

Apply text transforms conditionally with Tailwind's variant prefixes:

<h2 class="uppercase md:normal-case">

Uppercase on mobile, normal on medium screens and up

<button class="lowercase hover:uppercase">

Lowercase by default, uppercase on hover

<input class="normal-case focus:uppercase" />

Normal by default, uppercase when focused

Quick Reference

Class	CSS Property	Effect
`uppercase`	`text-transform: uppercase;`	ALL CHARACTERS BECOME UPPERCASE
`lowercase`	`text-transform: lowercase;`	all characters become lowercase
`capitalize`	`text-transform: capitalize;`	First Letter Of Each Word
`normal-case`	`text-transform: none;`	Preserves original casing

Frequently Asked Questions

What text transform classes are available in Tailwind CSS?

Tailwind CSS provides four text-transform utilities: uppercase (all caps), lowercase (all lowercase), capitalize (first letter of each word capitalized), and normal-case (preserves original casing, useful for resetting).

How do I make text uppercase in Tailwind CSS?

Add the uppercase class to your element: <span class="uppercase">hello</span> will display as "HELLO". This is commonly used for navigation links, buttons, and section headings.

What does capitalize do in Tailwind CSS?

The capitalize class capitalizes the first letter of each word. However, it only transforms the first character of each word to uppercase - it does not lowercase the remaining characters. So "hELLO wORLD" becomes "HELLO WORLD", not "Hello World".

When should I use normal-case in Tailwind?

Use normal-case to reset any inherited text-transform styles. This is useful when a parent element has uppercase or capitalize applied, but you want a child element to display in its original casing.

Can I apply text transform on hover or other states?

Yes! Use Tailwind's state variants like hover:uppercase or focus:capitalize. For example: <button class="lowercase hover:uppercase">hover me</button> will show uppercase text on hover.

What is the difference between CSS text-transform and JavaScript toLowerCase()?

CSS text-transform (like Tailwind's uppercase class) only changes the visual display without modifying the actual text data. JavaScript's toLowerCase() actually changes the string value. Use CSS for styling and JavaScript for data manipulation.

Inspect Tailwind classes on any website

Frontend Hero's Tailwind Scanner shows you all Tailwind classes of any element including text transforms. Extract any style with 2 clicks.

Get Frontend Hero now →

Explore more Tailwind tools

Tailwind Grid Generator

Create grid layouts visually

Tailwind Flexbox Generator

Create flex layouts visually

Tailwind Gradient Generator

Create custom gradients

Tailwind Text Gradient

Gradient text effects

Tailwind Gradients Collection

275+ ready-to-use gradients

Tailwind Colors

Complete 240+ color palette

Tailwind Box Shadow Generator

Design multi-layer shadows

Tailwind Text Shadow

Add depth to text with shadows

Tailwind Filter Generator

Apply blur, brightness & more

Tailwind Transform Generator

Rotate, scale & translate elements

Tailwind Animation Generator

Create built-in & custom animations

Tailwind Transition Generator

Smooth hover transitions

Tailwind Config Generator

Generate your config file

Tailwind Input Generator

Design form inputs visually

Tailwind Class Sorter

Organize classes in order

Flexbox Cheatsheet

All flex utilities visualized

Overflow Cheatsheet

Control content overflow

Browse all free Tailwind tools →