Why a color system matters in Tailwind - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

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

Tailwind

<div class="bg-[1]-500 p-4 text-white">Hello, color system!</div>

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

Atext

Bcircle

Cred

Dblue

Attempts:

3 left

💡 Hint

Common Mistakes

Using a non-color word like 'circle' or 'text' as a color name.

Forgetting the numeric shade like '-500'.

The class bg-blue-500 sets a blue background color. Tailwind uses a color system with names like red, blue, etc.

2fill in blank

medium

Complete the code to set text color using Tailwind's color system.

Tailwind

<p class="text-[1]-700">This text uses a color system.</p>

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

Agreen

Byellow

Cborder

Dcircle

Attempts:

3 left

💡 Hint

Common Mistakes

Using words that are not colors.

Confusing background and text color classes.

The class text-green-700 sets the text color to a dark green shade. Tailwind uses color names with numeric shades.

3fill in blank

hard

Fix the error in the Tailwind class to correctly apply a border color.

Tailwind

<div class="border-[1]-400 p-2">Border color example</div>

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

Apurple

Bcircle

Ctext

Dbg

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-color words in color classes.

Mixing background and border color classes.

The class border-purple-400 correctly sets the border color to a purple shade. Words like circle or bg are not valid color names.

4fill in blank

hard

Fill both blanks to create a button with a background and hover color using Tailwind's color system.

Tailwind

<button class="bg-[1]-600 hover:bg-[2]-700 text-white font-bold py-2 px-4 rounded">Click me</button>

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

Ablue

Bgreen

Cred

Dcircle

Attempts:

3 left

💡 Hint

Common Mistakes

Using the same color for both background and hover (not wrong but less interesting).

Using invalid color names.

The button uses bg-blue-600 for the background and hover:bg-red-700 for the hover effect. Both are valid Tailwind color names.

5fill in blank

hard

Fill all three blanks to create a card with border, background, and text colors using Tailwind's color system.

Tailwind

<div class="border-[1]-300 bg-[2]-100 text-[3]-800 p-6 rounded-lg">Card content</div>

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

Agray

Byellow

Cpurple

Dcircle

Attempts:

3 left

💡 Hint

Common Mistakes

Using invalid color names like 'circle'.

Mixing up the order of colors for border, background, and text.

The classes border-gray-300, bg-yellow-100, and text-purple-800 correctly set the border, background, and text colors using Tailwind's color system. gray, yellow, and purple are valid color names.