Class conflict resolution strategies in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

Tailwind

<div class="bg-[1]-500 p-4 text-white">Hello World</div>

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

Ared

Bblue

Cgreen

Dyellow

Attempts:

3 left

💡 Hint

Common Mistakes

Using a color name that does not exist in Tailwind like 'purple'.

Forgetting the numeric shade like '-500'.

The class bg-red-500 sets a red background color in Tailwind CSS.

2fill in blank

medium

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

Tailwind

<div class="p-[1] bg-gray-200">Content</div>

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

A8

B4

C6

D2

Attempts:

3 left

💡 Hint

Common Mistakes

Using p-60 which is too large.

Using p-0.6 which is invalid.

The class p-6 adds padding of 1.5rem (6 units) on all sides.

3fill in blank

hard

Fix the error in the class list to apply a blue text color correctly.

Tailwind

<p class="text-[1]-500 font-bold">Blue text</p>

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

Ared

Bblue

Cgreen

Dyellow

Attempts:

3 left

💡 Hint

Common Mistakes

Using a background color class like bg-blue-500 instead of text color.

Using an invalid color name.

The class text-blue-500 sets the text color to blue at shade 500.

4fill in blank

hard

Fill both blanks to create a hover effect that changes text color to green and background to gray.

Tailwind

<button class="text-gray-700 hover:text-[1]-500 hover:bg-[2]-200 p-2 rounded">Click me</button>

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

Agreen

Bblue

Cgray

Dred

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up text and background colors.

Using colors not in Tailwind's palette.

The hover text color should be green (hover:text-green-500) and the hover background gray (hover:bg-gray-200).

5fill in blank

hard

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

Tailwind

<div class="shadow-[1] p-[2] rounded-[3] bg-white max-w-sm mx-auto">Card content</div>

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

Alg

B6

Cmd

Dsm

Attempts:

3 left

💡 Hint

Common Mistakes

Using shadow-lg which is too large for this card.

Using rounded-sm which is less rounded than md.

The class shadow-sm adds a small shadow, p-6 adds padding, and rounded-md adds medium rounded corners.