Font weight control in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

Tailwind

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

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

Afont-light

Btext-lg

Cfont-bold

Dtext-center

Attempts:

3 left

💡 Hint

Common Mistakes

Using text size classes like text-lg instead of font weight.

Using alignment classes like text-center which do not affect weight.

The font-bold class in Tailwind CSS makes the text bold by setting a heavier font weight.

2fill in blank

medium

Complete the code to make the text have a light font weight using Tailwind CSS.

Tailwind

<span class="[1]">This text is light.</span>

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

Afont-light

Bfont-normal

Cfont-extrabold

Dfont-semibold

Attempts:

3 left

💡 Hint

Common Mistakes

Using font-semibold which is heavier than normal.

Using font-extrabold which is very heavy.

The font-light class applies a lighter font weight, making the text appear thinner.

3fill in blank

hard

Fix the error in the class to make the text have normal font weight.

Tailwind

<div class="[1]">Normal weight text.</div>

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

Afont-normal

Bfont-light

Cfont-heavy

Dfont-bold

Attempts:

3 left

💡 Hint

Common Mistakes

Using font-heavy which does not exist.

Using font-bold which is heavier than normal.

The correct Tailwind class for normal font weight is font-normal. font-heavy is not a valid class.

4fill in blank

hard

Fill both blanks to make the heading bold and centered.

Tailwind

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

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

Afont-bold

Btext-center

Cfont-light

Dtext-left

Attempts:

3 left

💡 Hint

Common Mistakes

Using font-light instead of bold.

Using text-left which aligns text to the left.

font-bold makes the text bold, and text-center centers the text horizontally.

5fill in blank

hard

Fill all three blanks to create a paragraph with semi-bold font, right-aligned text, and large font size.

Tailwind

<p class="[1] [2] [3]">Styled paragraph.</p>

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

Afont-semibold

Btext-right

Ctext-xl

Dfont-light

Attempts:

3 left

💡 Hint

Common Mistakes

Using font-light instead of semi-bold.

Using text-left instead of right alignment.

Using smaller font size classes like text-sm.

font-semibold applies a semi-bold font weight, text-right aligns text to the right, and text-xl sets a large font size.