Text transform (uppercase, lowercase) in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

Which Tailwind class makes text uppercase?

You want to transform text to uppercase using Tailwind CSS. Which class should you use?

A uppercase

B text-uppercase

C text-upper

D text-transform-uppercase

💡 Hint

Tailwind uses short, simple class names for common CSS properties.

The correct Tailwind class for uppercase text is 'uppercase'. Other options are invalid class names.

❓ rendering

intermediate

What will be the visual output of this HTML with Tailwind?

Given this HTML snippet:

<p class="lowercase">HELLO WORLD</p>

What will the text look like in the browser?

Tailwind

<p class="lowercase">HELLO WORLD</p>

A hElLo WoRlD (mixed case)

B hello world (all lowercase)

C Hello World (capitalized first letters)

D HELLO WORLD (all uppercase)

💡 Hint

The 'lowercase' class changes all letters to small letters.

The 'lowercase' Tailwind class transforms all text to lowercase, so 'HELLO WORLD' becomes 'hello world'.

🧠 Conceptual

advanced

Which Tailwind class does NOT affect text case?

Select the Tailwind class that does NOT change the case of text.

A lowercase

B capitalize

C truncate

D uppercase

💡 Hint

Think about what 'truncate' does to text.

'truncate' cuts off overflowing text with an ellipsis but does not change letter case. The other classes change text case.

❓ selector

advanced

Which CSS selector targets all uppercase text in Tailwind?

You want to style all elements with uppercase text using Tailwind's generated CSS. Which selector matches the uppercase text class?

A .text-uppercase

B #uppercase

C uppercase

D .uppercase

💡 Hint

Tailwind uses class selectors starting with a dot.

Tailwind's uppercase class is '.uppercase'. '#uppercase' is an ID selector, 'uppercase' alone is invalid, and '.text-uppercase' is not a Tailwind class.

❓ accessibility

expert

How to ensure uppercase text remains accessible?

You use Tailwind's 'uppercase' class to transform text visually. What should you do to keep the text accessible for screen readers?

A Add aria-label with original text in normal case

B Use JavaScript to change text content to uppercase permanently

C Wrap text in <strong> tags to emphasize uppercase

D No action needed; screen readers read transformed text correctly

💡 Hint

Screen readers read the actual text content, not CSS transformations.

CSS text-transform changes only visual appearance. Screen readers read the original text. Adding aria-label with original casing helps preserve meaning and clarity.

Practice

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