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.