Pairing light and dark colors in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set a light background color using Tailwind CSS.

Tailwind

<div class="bg-[1]-100 p-4">
  Light background color box
</div>

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

Agreen

Bred

Cblue

Dyellow

Attempts:

3 left

💡 Hint

Common Mistakes

Using a dark shade number like 900 for a light background.

Using a color name that is not in Tailwind's palette.

The class bg-blue-100 sets a light blue background color.

2fill in blank

medium

Complete the code to set a dark text color using Tailwind CSS.

Tailwind

<p class="text-[1]-900">
  Dark text color example
</p>

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

Apink

Bgray

Cpurple

Dorange

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing a light color name for dark text.

Using a shade number like 100 which is light.

The class text-gray-900 sets a very dark gray text color, suitable for dark text.

3fill in blank

hard

Fix the error in the Tailwind class to apply dark mode background color.

Tailwind

<div class="[1]:bg-gray-800 p-6">
  Dark mode background
</div>

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

Ahover

Blight

Cfocus

Ddark

Attempts:

3 left

💡 Hint

Common Mistakes

Using light: which is not a valid Tailwind prefix.

Confusing hover or focus states with dark mode.

The dark: prefix applies styles when dark mode is active.

4fill in blank

hard

Fill both blanks to create a button with light background and dark text that changes in dark mode.

Tailwind

<button class="bg-[1]-200 text-[2]-900 dark:bg-[1]-800 dark:text-[2]-100 p-3 rounded">
  Click me
</button>

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

Ablue

Bgreen

Cgray

Dred

Attempts:

3 left

💡 Hint

Common Mistakes

Using the same color for background and text causing poor contrast.

Choosing colors that do not have matching dark mode shades.

Using blue for background and gray for text creates a good light/dark contrast.

5fill in blank

hard

Fill all three blanks to create a card with light background, dark border, and text that adapts in dark mode.

Tailwind

<div class="bg-[1]-50 border-[2]-700 text-[3]-900 dark:bg-[1]-900 dark:border-[2]-300 dark:text-[3]-100 p-5 rounded-lg">
  Adaptive color card
</div>

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

Ayellow

Bgray

Cpurple

Dteal

Attempts:

3 left

💡 Hint

Common Mistakes

Using bright colors for border causing harsh contrast.

Not matching dark mode shades properly.

Using teal for background, and gray for border and text ensures good contrast and adapts well in dark mode.