Text transform (uppercase, lowercase) in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the text uppercase using Tailwind CSS.

Tailwind

<p class="[1]">hello world</p>

Drag options to blanks, or click blank then click option'

Atext-normal-case

Btext-lowercase

Ctext-capitalize

Duppercase

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-lowercase which makes text lowercase.

Using text-capitalize which only capitalizes first letters.

The uppercase class in Tailwind CSS transforms text to uppercase.

2fill in blank

medium

Complete the code to make the text lowercase using Tailwind CSS.

Tailwind

<span class="[1]">HELLO WORLD</span>

Drag options to blanks, or click blank then click option'

Alowercase

Btext-uppercase

Ctext-capitalize

Dtext-normal-case

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-uppercase which makes text uppercase.

Using text-capitalize which only capitalizes first letters.

The lowercase class in Tailwind CSS transforms text to lowercase.

3fill in blank

hard

Fix the error in the code to correctly transform text to capitalized form using Tailwind CSS.

Tailwind

<div class="[1]">hello world</div>

Drag options to blanks, or click blank then click option'

Atext-uppercase

Bcapitalize

Ctext-normal-case

Dtext-lowercase

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-uppercase which makes all letters uppercase.

Using text-lowercase which makes all letters lowercase.

The capitalize class capitalizes the first letter of each word in Tailwind CSS.

4fill in blank

hard

Fill both blanks to create a paragraph with uppercase text and normal font weight using Tailwind CSS.

Tailwind

<p class="[1] [2]">This is important!</p>

Drag options to blanks, or click blank then click option'

Auppercase

Bfont-bold

Cfont-normal

Dtext-lowercase

Attempts:

3 left

💡 Hint

Common Mistakes

Using font-bold instead of font-normal.

Using text-lowercase instead of uppercase.

Use uppercase to make text uppercase and font-normal for normal font weight.

5fill in blank

hard

Fill all three blanks to create a heading with lowercase text, bold font, and centered alignment using Tailwind CSS.

Tailwind

<h1 class="[1] [2] [3]">Welcome Home</h1>

Drag options to blanks, or click blank then click option'

Atext-uppercase

Bfont-bold

Clowercase

Dtext-center

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up uppercase and lowercase classes.

Forgetting to center the text.

Use lowercase for lowercase text, font-bold for bold font, and text-center to center the text.

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