Font size and scaling in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the font size to large using Tailwind CSS.

Tailwind

<p class="text-[1]">This is large text.</p>

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

Asm

Blg

Cxl

Dbase

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-sm which is smaller size.

Using text-base which is default size.

The class text-lg sets the font size to large in Tailwind CSS.

2fill in blank

medium

Complete the code to make the text size responsive, larger on medium screens.

Tailwind

<p class="text-base [1]:text-xl">Responsive text size</p>

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

Amd

Blg

Csm

Dxl

Attempts:

3 left

💡 Hint

Common Mistakes

Using lg: which applies on large screens, not medium.

Using sm: which applies on small screens.

The prefix md: applies styles on medium screens and up. So md:text-xl makes text larger on medium screens.

3fill in blank

hard

Fix the error in the code to correctly set font size to extra large.

Tailwind

<h1 class="text[1]">Big heading</h1>

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

A-xl

Bxl

C-2xl

D:xl

Attempts:

3 left

💡 Hint

Common Mistakes

Writing textxl without dash.

Using colon :xl which is invalid here.

Tailwind font size classes use a dash after text, so text-xl is correct. The blank is after text, so -xl completes it.

4fill in blank

hard

Fill both blanks to create a paragraph with small text on mobile and medium text on medium screens.

Tailwind

<p class="text-[1] [2]:text-base">Adaptive text size</p>

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

Asm

Bmd

Clg

Dxl

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-base as default instead of small.

Missing the md: prefix.

The class text-sm sets small text by default. The prefix md: applies styles on medium screens, so md:text-base sets medium text size on medium screens.

5fill in blank

hard

Fill all three blanks to create a heading with base font size, bold weight, and extra large size on large screens.

Tailwind

<h2 class="[1] [2] [3]:text-xl">Styled heading</h2>

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

Afont-bold

Btext-base

Clg

Dtext-lg

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-lg as default instead of base.

Missing the font-bold class.

text-base sets the base font size, font-bold makes the text bold, and lg:text-xl applies extra large text on large screens.

Practice

1. Which Tailwind class sets the font size to extra small?

easy

A. text-xs

B. text-lg

C. text-3xl

D. text-base

Solution

1. Step 1: Understand Tailwind font size naming

   Tailwind uses text-xs for extra small font size.

2. Step 2: Match the class to the size

   Among the options, only text-xs means extra small.

3. Final Answer:

   text-xs -> Option A

4. Quick Check:

   Extra small font = text-xs [OK]

Hint: Extra small font always uses text-xs in Tailwind [OK]

Common Mistakes:

• Confusing text-xs with text-base or text-lg
• Thinking text-3xl is small instead of large
• Assuming text-base is the smallest size

2. Which of these is the correct Tailwind class to make text very large, close to the largest size?

easy

A. text-2xl

B. text-sm

C. text-9xl

D. text-base

Solution

1. Step 1: Recall Tailwind font size scale

   Tailwind font sizes go up to text-9xl for very large text.

2. Step 2: Identify the largest size option

   Among the options, text-9xl is the largest size available.

3. Final Answer:

   text-9xl -> Option C

4. Quick Check:

   Largest font size = text-9xl [OK]

Hint: Largest font size in Tailwind is text-9xl [OK]

Common Mistakes:

• Choosing text-2xl thinking it's the largest
• Confusing text-sm as large
• Using text-base which is default size

3. What font size will the following HTML render with Tailwind?

<p class="text-lg">Hello</p>

medium

A. Large font size

B. Small font size

C. Medium font size

D. Extra large font size

Solution

1. Step 1: Understand the class text-lg

   The class text-lg in Tailwind means large font size, bigger than base.

2. Step 2: Match the size description

   Among the options, "Large font size" best matches text-lg.

3. Final Answer:

   Large font size -> Option A

4. Quick Check:

   text-lg = Large font size [OK]

Hint: text-lg means large font size in Tailwind [OK]

Common Mistakes:

• Thinking text-lg is medium or small
• Confusing text-lg with text-xl or text-base
• Ignoring the class and guessing default size

4. You want to make text smaller on mobile but larger on desktop using Tailwind. Which class combination is correct?

<p class="?">Responsive Text</p>

medium

A. text-lg sm:text-sm

B. text-sm md:text-lg

C. text-base lg:text-xs

D. text-xl md:text-xs

Solution

1. Step 1: Understand Tailwind responsive prefixes

   Tailwind uses prefixes like md: to apply styles on medium screens and up.

2. Step 2: Choose smaller text by default and larger on medium screens

   text-sm md:text-lg means small text on mobile and large text on medium+ screens.

3. Final Answer:

   text-sm md:text-lg -> Option B

4. Quick Check:

   Mobile small, desktop large = text-sm md:text-lg [OK]

Hint: Use mobile first: small text, then md: larger text [OK]

Common Mistakes:

• Reversing sizes for mobile and desktop
• Using wrong breakpoint prefixes
• Not using responsive prefixes at all

5. You want a heading that scales smoothly from small on mobile to very large on desktop using Tailwind. Which class set achieves this best?

<h1 class="?">Scaling Heading</h1>

hard

A. text-3xl md:text-5xl lg:text-6xl

B. text-lg sm:text-xl md:text-2xl

C. text-xs sm:text-base md:text-lg

D. text-sm md:text-4xl lg:text-7xl

Solution

1. Step 1: Identify scaling from small to very large

   We want text starting small on mobile, then bigger on medium, and very large on large screens.

2. Step 2: Check each option's size progression

   text-sm md:text-4xl lg:text-7xl scales from text-sm (small), to text-4xl (large), to text-7xl (very large), matching the requirement.

3. Final Answer:

   text-sm md:text-4xl lg:text-7xl -> Option D

4. Quick Check:

   Small to very large scaling = text-sm md:text-4xl lg:text-7xl [OK]

Hint: Use increasing sizes with responsive prefixes for smooth scaling [OK]

Common Mistakes:

• Choosing options with small max sizes
• Not increasing size enough on larger screens
• Using sizes that start too large on mobile