Utility-first approach vs traditional CSS in Tailwind - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply a red background using Tailwind CSS utility classes.

Tailwind

<div class="[1]">Hello World</div>

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

Acolor-red

Bbackground-red

Cred-bg

Dbg-red-500

Attempts:

3 left

💡 Hint

Common Mistakes

Using traditional CSS class names instead of Tailwind utility classes.

Confusing text color classes with background color classes.

The Tailwind CSS class bg-red-500 applies a red background color. Other options are not valid Tailwind classes.

2fill in blank

medium

Complete the code to add padding of 4 units using Tailwind CSS.

Tailwind

<button class="[1]">Click me</button>

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

Apadd-4

Bp-4

Cpad-4

Dpadding-4

Attempts:

3 left

💡 Hint

Common Mistakes

Using full words like 'padding' instead of shorthand 'p'.

Misspelling the class name.

In Tailwind CSS, p-4 adds padding of 1rem (4 units) on all sides. Other options are not valid Tailwind classes.

3fill in blank

hard

Fix the error in the Tailwind CSS class to center text horizontally.

Tailwind

<p class="text-[1]">Centered text</p>

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

Acenter

Bmiddle

Calign-center

Dtext-centered

Attempts:

3 left

💡 Hint

Common Mistakes

Using CSS properties as class names.

Adding extra suffixes like '-ed' or 'align-'.

The correct Tailwind class to center text is text-center. Other options are invalid.

4fill in blank

hard

Fill both blanks to create a blue button with white text using Tailwind CSS.

Tailwind

<button class="[1] [2]">Submit</button>

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

Abg-blue-600

Btext-white

Cblue-bg

Dwhite-text

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-Tailwind class names like 'blue-bg' or 'white-text'.

Mixing up background and text color classes.

bg-blue-600 sets a blue background and text-white sets white text color in Tailwind CSS.

5fill in blank

hard

Fill all three blanks to create a responsive card with padding, shadow, and rounded corners using Tailwind CSS.

Tailwind

<div class="[1] [2] [3]">Card content</div>

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

Ap-6

Bshadow-lg

Crounded-md

Dcard-style

Attempts:

3 left

💡 Hint

Common Mistakes

Using custom class names like 'card-style' which are not Tailwind utilities.

Confusing shadow and border radius classes.

p-6 adds padding, shadow-lg adds a large shadow, and rounded-md adds medium rounded corners in Tailwind CSS.