Bird
Raised Fist0
Tailwindmarkup~5 mins

Text transform (uppercase, lowercase) in Tailwind

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction

Text transform changes how letters look in words. It helps make text all uppercase or lowercase easily.

When you want all letters in a heading to be uppercase for style.
When you want a button label to always show in lowercase.
When you want to make text consistent without rewriting it.
When you want to highlight text by changing its case.
When you want to improve readability or follow design rules.
Syntax
Tailwind
class="uppercase"
class="lowercase"
class="capitalize"

uppercase makes all letters capital.

lowercase makes all letters small.

capitalize makes first letter of each word uppercase.

Examples
This makes the text show as HELLO WORLD.
Tailwind
<p class="uppercase">hello world</p>
This makes the text show as hello world.
Tailwind
<p class="lowercase">HELLO WORLD</p>
This makes the text show as Hello World.
Tailwind
<p class="capitalize">hello world</p>
Sample Program

This page shows three lines of text. The first line is all uppercase, the second is all lowercase, and the third has each word starting with a capital letter. Tailwind classes do the text transform automatically.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Text Transform Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
  <section>
    <h2 class="uppercase text-lg font-bold mb-2">this is uppercase text</h2>
    <p class="lowercase mb-2">THIS IS LOWERCASE TEXT</p>
    <p class="capitalize">this is capitalized text</p>
  </section>
</body>
</html>
OutputSuccess
Important Notes

Text transform only changes how text looks, not the actual text content.

Use semantic HTML tags like <h2> and <p> for better accessibility.

Tailwind classes make it easy to apply text transform without writing custom CSS.

Summary

Use uppercase to make text all capital letters.

Use lowercase to make text all small letters.

Use capitalize to make the first letter of each word uppercase.

Practice

(1/5)
1. What does the Tailwind CSS class uppercase do to the text?
easy
A. Removes all text transformations
B. Converts all letters to small letters
C. Capitalizes only the first letter of the text
D. Converts all letters to capital letters

Solution

  1. Step 1: Understand the uppercase class

    The uppercase class changes all letters in the text to capital letters.

  2. Step 2: Compare with other options

    Other options describe different transformations like lowercase or capitalize, which are not what uppercase does.

  3. Final Answer:

    Converts all letters to capital letters -> Option D

  4. Quick Check:

    uppercase = all capital letters [OK]
Hint: Uppercase means all letters become capital [OK]
Common Mistakes:
  • Confusing uppercase with capitalize
  • Thinking uppercase only affects first letter
  • Mixing uppercase with lowercase
2. Which Tailwind CSS class correctly makes all text lowercase?
easy
A. uppercase
B. lowercase
C. capitalize
D. text-lower

Solution

  1. Step 1: Identify the class for lowercase

    The correct Tailwind class to make all text lowercase is lowercase.

  2. Step 2: Check other options

    capitalize changes first letters to uppercase, uppercase makes all letters capital, and text-lower is not a valid Tailwind class.

  3. Final Answer:

    lowercase -> Option B

  4. Quick Check:

    lowercase = all small letters [OK]
Hint: Lowercase class is exactly named 'lowercase' [OK]
Common Mistakes:
  • Using 'capitalize' instead of 'lowercase'
  • Trying non-existent class like 'text-lower'
  • Confusing uppercase and lowercase classes
3. What will be the visual output of this HTML snippet?
<p class="uppercase">Hello World</p>
medium
A. HELLO WORLD
B. hello world
C. Hello World
D. hELLO wORLD

Solution

  1. Step 1: Understand the uppercase effect

    The class uppercase converts all letters to capital letters.

  2. Step 2: Apply transformation to the text

    "Hello World" becomes "HELLO WORLD" when uppercase is applied.

  3. Final Answer:

    HELLO WORLD -> Option A

  4. Quick Check:

    uppercase transforms text to all caps [OK]
Hint: Uppercase class makes all letters capital [OK]
Common Mistakes:
  • Assuming only first letter changes
  • Ignoring class effect and reading original text
  • Mixing uppercase with capitalize
4. You want to make all text lowercase but accidentally use class="lowercasee". What happens?
medium
A. Text stays unchanged
B. Text becomes uppercase
C. Text becomes lowercase
D. Page shows an error

Solution

  1. Step 1: Check class spelling

    The class lowercasee is misspelled and not recognized by Tailwind CSS.

  2. Step 2: Effect of unknown class

    Since the class is invalid, no CSS transformation applies, so text stays as originally typed.

  3. Final Answer:

    Text stays unchanged -> Option A

  4. Quick Check:

    Invalid class means no style change [OK]
Hint: Misspelled class won't apply styles [OK]
Common Mistakes:
  • Expecting lowercase effect with wrong class
  • Thinking browser throws error for bad class
  • Confusing class names with similar spelling
5. You want a heading where each word starts with a capital letter, but the rest are lowercase. Which Tailwind class should you use?
hard
A. uppercase
B. lowercase
C. capitalize
D. text-transform

Solution

  1. Step 1: Understand the capitalize class

    The capitalize class makes the first letter of each word uppercase and the rest lowercase.

  2. Step 2: Compare with other classes

    uppercase makes all letters capital, lowercase makes all letters small, and text-transform is not a valid Tailwind class.

  3. Final Answer:

    capitalize -> Option C

  4. Quick Check:

    capitalize = first letter uppercase each word [OK]
Hint: Capitalize makes first letter of each word uppercase [OK]
Common Mistakes:
  • Using uppercase instead of capitalize
  • Trying non-existent class 'text-transform'
  • Confusing capitalize with lowercase