text-transform
Change displayed casing while preserving the underlying text and language.
Overview
| Class | Declarations |
|---|---|
capitalize | text-transform: capitalize;
|
uppercase | text-transform: uppercase;
|
lowercase | text-transform: lowercase;
|
text-transform:none | text-transform: none;
|
text-transform:<transform> | text-transform: <transform>;
|
Basic usage
Capitalized text
capitalize changes the initial letter of each word. It leaves other letters intact, so CSS remains uppercase. It does not implement editorial title-case rules.
<!-- text-transform:none --><p id="target" lang="en" class="w:240px max-w:100% m:0 font-md leading:24px text-transform:none">clear CSS for every screen</p><!-- capitalize --><p id="target" lang="en" class="w:240px max-w:100% m:0 font-md leading:24px capitalize">clear CSS for every screen</p>Lowercase text
lowercase changes the displayed casing. The source text remains uppercase, and language-specific mappings use the element’s lang.
<!-- text-transform:none --><p id="target" lang="en" class="w:240px max-w:100% m:0 font-md leading:24px text-transform:none">CLEAR CSS FOR EVERY SCREEN</p><!-- lowercase --><p id="target" lang="en" class="w:240px max-w:100% m:0 font-md leading:24px lowercase">CLEAR CSS FOR EVERY SCREEN</p>Uppercase text
uppercase changes the displayed letters without rewriting the document’s text. Supply the correct language for language-specific casing.
<!-- English uppercase --><p id="target" lang="en" class="w:240px max-w:100% m:0 font-md leading:24px uppercase">clear type</p><!-- Turkish dotted i --><p id="target" lang="tr" class="w:240px max-w:100% m:0 font-md leading:24px uppercase">istanbul</p>Generated CSS
@layer utilities { .uppercase { text-transform: uppercase }}Transform the first letter
Apply uppercase::first-letter to the first formatted letter of a block. It does not capitalize the first letter of every sentence: the second sentence below still starts with a lowercase letter.
<!-- One block · two sentences --><p id="target" class="w:240px max-w:100% m:0 font-md leading:24px uppercase::first-letter">clear type helps readers. good spacing keeps the rhythm.</p>Write meaningful casing into the actual content when it is part of the text’s meaning.
Apply conditionally
Hover or focus the button to uppercase its label. Keyboard users receive the same state and a visible focus outline.
<!-- Pointer and keyboard states --><button id="target" type="button" tabindex="0" class="font-md text-transform:none uppercase:hover uppercase:focus-visible">Explore the canvas</button>