Why Tailwind CSS exists - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a Tailwind class that makes text bold.

Tailwind

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

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

Afont-bold

Bbg-blue-500

Ctext-center

Dp-4

Attempts:

3 left

💡 Hint

Common Mistakes

Using padding or background color classes instead of font weight.

The font-bold class in Tailwind CSS makes the text bold.

2fill in blank

medium

Complete the code to add a Tailwind class that centers text horizontally.

Tailwind

<div class="[1]">Centered text</div>

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

Atext-center

Bm-2

Cbg-red-300

Dfont-bold

Attempts:

3 left

💡 Hint

Common Mistakes

Using margin or background classes instead of text alignment.

The text-center class centers text horizontally in Tailwind CSS.

3fill in blank

hard

Fix the error in the Tailwind class to add padding of 4 units.

Tailwind

<section class="[1]">Content with padding</section>

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

Apad-4

Bpadding-4

Cp-4

Dp4

Attempts:

3 left

💡 Hint

Common Mistakes

Using full words like 'padding-4' or missing hyphens.

In Tailwind CSS, padding is added with p-4. Other options are invalid.

4fill in blank

hard

Fill both blanks to create a responsive blue background with padding.

Tailwind

<div class="[1] [2]">Responsive box</div>

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

Abg-blue-500

Bp-6

Cp-4

Dbg-red-500

Attempts:

3 left

💡 Hint

Common Mistakes

Using red background or wrong padding classes.

bg-blue-500 sets a blue background, and p-4 adds padding.

5fill in blank

hard

Fill all three blanks to create a flex container with centered items and gap.

Tailwind

<div class="[1] [2] [3]">Flex container</div>

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

Aflex

Bitems-center

Cgap-4

Dblock

Attempts:

3 left

💡 Hint

Common Mistakes

Using block instead of flex or missing gap class.

flex makes the container flexible, items-center centers items vertically, and gap-4 adds space between items.