Bird
Raised Fist0
Tailwindmarkup~15 mins

Text transform (uppercase, lowercase) in Tailwind - Mini Project: Build & Apply

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
Text Transform with Tailwind CSS
📖 Scenario: You are creating a simple webpage to display three different text styles: normal, uppercase, and lowercase. This helps users see how text can change appearance using Tailwind CSS classes.
🎯 Goal: Build a webpage with three paragraphs. The first paragraph shows normal text, the second paragraph shows the same text in uppercase, and the third paragraph shows the same text in lowercase. Use Tailwind CSS classes for text transformation.
📋 What You'll Learn
Create an HTML skeleton with lang, charset, and viewport meta tags
Add three paragraphs with the text: 'Hello Tailwind CSS!'
Apply no text transform class to the first paragraph (normal text)
Apply the Tailwind class uppercase to the second paragraph
Apply the Tailwind class lowercase to the third paragraph
Use semantic HTML and ensure accessibility
💡 Why This Matters
🌍 Real World
Text transformation is common in web design to emphasize or style text content clearly and accessibly.
💼 Career
Knowing how to use Tailwind CSS for text styling is useful for frontend developers to quickly build visually consistent and accessible interfaces.
Progress0 / 4 steps
1
Create the HTML skeleton with three paragraphs
Create an HTML file with lang="en", charset="UTF-8", and viewport meta tags inside the <head>. Inside the <body>, add three <p> elements each containing the text Hello Tailwind CSS!.
Tailwind
Hint

Remember to add the lang attribute to the <html> tag and include the required meta tags inside <head>.

2
Add Tailwind CSS link to the head
Add the Tailwind CSS CDN link inside the <head> section to enable Tailwind styles on the page. Use the official Tailwind CDN link: <link href="https://cdn.tailwindcss.com" rel="stylesheet">.
Tailwind
Hint

Use the <link> tag with the href set to https://cdn.tailwindcss.com inside the <head>.

3
Apply uppercase and lowercase Tailwind classes
Add the Tailwind class uppercase to the second <p> element and the class lowercase to the third <p> element. Leave the first paragraph without any text transform class.
Tailwind
Hint

Use the Tailwind classes uppercase and lowercase inside the class attribute of the second and third paragraphs respectively.

4
Add accessible labels and spacing
Add an aria-label attribute to each paragraph describing the text transform style: 'Normal text', 'Uppercase text', and 'Lowercase text'. Also, add the Tailwind class mb-4 to each paragraph to add spacing below them.
Tailwind
Hint

Use aria-label attributes to describe each paragraph for screen readers. Add the Tailwind class mb-4 to add margin below each paragraph.

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