Font family utilities in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply a sans-serif font family using Tailwind CSS.

Tailwind

<p class="font-[1]">This text uses a sans-serif font.</p>

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

Asans

Bserif

Cmono

Dcursive

Attempts:

3 left

💡 Hint

Common Mistakes

Using font-serif instead of font-sans for sans-serif fonts.

Using font-mono which applies monospace fonts.

The class font-sans applies a sans-serif font family in Tailwind CSS.

2fill in blank

medium

Complete the code to apply a monospace font family using Tailwind CSS.

Tailwind

<code class="font-[1]">console.log('Hello, world!');</code>

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

Aserif

Bdisplay

Cmono

Dsans

Attempts:

3 left

💡 Hint

Common Mistakes

Using font-sans or font-serif for code blocks.

Using font-display which is for decorative fonts.

The class font-mono applies a monospace font family in Tailwind CSS, which is good for code.

3fill in blank

hard

Fix the error in the class name to apply a serif font family using Tailwind CSS.

Tailwind

<h1 class="font-[1]">Welcome to the site</h1>

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

Aserif

Bsans

Cmono

Dscript

Attempts:

3 left

💡 Hint

Common Mistakes

Using font-sans when a serif font is needed.

Using invalid class names like font-script.

The correct class for serif fonts in Tailwind CSS is font-serif.

4fill in blank

hard

Fill both blanks to apply a monospace font and make the text bold using Tailwind CSS.

Tailwind

<p class="[1] [2]">This is code text.</p>

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

Afont-mono

Bfont-bold

Cfont-sans

Dfont-light

Attempts:

3 left

💡 Hint

Common Mistakes

Using font-sans instead of font-mono for code text.

Using font-light instead of font-bold for bold text.

font-mono applies monospace font and font-bold makes text bold in Tailwind CSS.

5fill in blank

hard

Fill all three blanks to create a heading with serif font, extra large size, and italic style using Tailwind CSS.

Tailwind

<h2 class="[1] [2] [3]">Stylish Heading</h2>

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

Afont-serif

Btext-xl

Citalic

Dfont-mono

Attempts:

3 left

💡 Hint

Common Mistakes

Using font-mono instead of font-serif for serif fonts.

Forgetting to add italic for italic style.

font-serif applies serif font, text-xl sets extra large text size, and italic makes text italic in Tailwind CSS.

Practice

1. Which Tailwind CSS class applies a sans-serif font to text?

easy

A. font-bold

B. font-sans

C. font-mono

D. font-serif

Solution

1. Step 1: Understand font family classes in Tailwind

   Tailwind provides font-sans for sans-serif fonts, font-serif for serif fonts, and font-mono for monospace fonts.

2. Step 2: Identify the class for sans-serif

   The class font-sans applies a sans-serif font style to text.

3. Final Answer:

   font-sans -> Option B

4. Quick Check:

   Sans-serif font class = font-sans [OK]

Hint: Sans-serif font uses font-sans class in Tailwind [OK]

Common Mistakes:

• Confusing font-serif with sans-serif
• Using font-bold which controls weight, not font family
• Choosing font-mono which is monospace, not sans-serif

2. Which of these is the correct Tailwind class to apply a monospace font?

easy

A. font-serif

B. font-sans

C. font-mono

D. font-light

Solution

1. Step 1: Recall monospace font class in Tailwind

   Tailwind uses font-mono to apply monospace fonts, which have equal spacing for each character.

2. Step 2: Confirm the correct class

   font-mono is the correct class to apply monospace fonts, while others apply serif, sans-serif, or font weight.

3. Final Answer:

   font-mono -> Option C

4. Quick Check:

   Monospace font class = font-mono [OK]

Hint: Monospace font always uses font-mono class [OK]

Common Mistakes:

• Choosing font-serif or font-sans instead of font-mono
• Confusing font-light (weight) with font family
• Missing the monospace meaning of font-mono

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

<p class="font-serif">Hello World</p>

medium

A. Bold font

B. Monospace font

C. Sans-serif font

D. Serif font

Solution

1. Step 1: Identify the class used in the paragraph

   The paragraph uses the class font-serif, which applies a serif font family.

2. Step 2: Understand what serif font means

   Serif fonts have small decorative lines at the ends of letters, different from sans-serif or monospace fonts.

3. Final Answer:

   Serif font -> Option D

4. Quick Check:

   font-serif class = Serif font [OK]

Hint: font-serif class means serif font family [OK]

Common Mistakes:

• Thinking font-serif applies sans-serif
• Confusing font-serif with font-mono
• Assuming font-bold changes font family

4. Find the error in this Tailwind usage:

<h1 class="font-sans-serif">Welcome</h1>

medium

A. font-sans-serif is not a valid Tailwind class

B. Missing quotes around class name

C. Should use font-mono for headings

D. Class name should be font-bold

Solution

1. Step 1: Check the class name validity

   The class font-sans-serif is not a valid Tailwind font family class. Tailwind uses font-sans for sans-serif fonts.

2. Step 2: Identify correct class for sans-serif

   The correct class to apply a sans-serif font is font-sans, not font-sans-serif.

3. Final Answer:

   font-sans-serif is not a valid Tailwind class -> Option A

4. Quick Check:

   Valid font family classes are font-sans, font-serif, font-mono [OK]

Hint: Tailwind font classes are font-sans, font-serif, font-mono only [OK]

Common Mistakes:

• Adding extra words like '-serif' to font-sans
• Confusing font weight classes with font family
• Assuming font-mono is default for headings

5. You want to style a code block with a monospace font and make it easy to read on small screens. Which Tailwind classes should you use?

<code class="?">console.log('Hello')</code>

hard

A. font-mono text-sm

B. font-serif text-lg

C. font-sans text-xs

D. font-mono text-xl

Solution

1. Step 1: Choose monospace font class for code

   Code blocks are best styled with monospace fonts, so use font-mono.

2. Step 2: Select a small readable text size for small screens

   Use text-sm for smaller but readable text size on small devices.

3. Final Answer:

   font-mono text-sm -> Option A

4. Quick Check:

   Monospace + small text = font-mono text-sm [OK]

Hint: Use font-mono with text-sm for readable code on small screens [OK]

Common Mistakes:

• Using font-serif or font-sans for code blocks
• Choosing too large text size for small screens
• Mixing font weight classes instead of font family