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.