Dark variant usage in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

Tailwind

<div class="bg-white [1]:bg-gray-800 p-4">
  <p class="text-black dark:text-white">Hello, world!</p>
</div>

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

Adark

Bactive

Chover

Dfocus

Attempts:

3 left

💡 Hint

Common Mistakes

Using hover or focus variants instead of dark.

Forgetting to enable dark mode in Tailwind config.

The dark variant applies styles when the user prefers dark mode. Here, dark:bg-gray-800 sets a dark background in dark mode.

2fill in blank

medium

Complete the code to change text color in dark mode using Tailwind CSS.

Tailwind

<p class="text-gray-900 [1]:text-gray-100">This text changes color in dark mode.</p>

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

Adark

Bfocus

Chover

Dactive

Attempts:

3 left

💡 Hint

Common Mistakes

Using hover or focus variants instead of dark.

Not enabling dark mode in Tailwind config.

The dark variant changes the text color when dark mode is active.

3fill in blank

hard

Fix the error in the code to correctly apply dark mode background color.

Tailwind

<div class="bg-white [1]:bg-gray-900 p-6">
  Dark mode background example.
</div>

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

Aactive

Bhover

Cfocus

Ddark

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variant other than dark for dark mode styling.

Missing the colon after the variant.

The correct variant prefix for dark mode is dark. It should be dark:bg-gray-900.

4fill in blank

hard

Fill both blanks to apply dark mode text and background colors.

Tailwind

<section class="[1]:bg-gray-900 [2]:text-gray-100 p-8">
  Dark mode styled section.
</section>

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

Adark

Bhover

Dfocus

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variants for background and text colors.

Forgetting the colon after the variant.

Both background and text color changes use the dark variant to apply styles in dark mode.

5fill in blank

hard

Fill all three blanks to create a button with dark mode background, text, and border colors.

Tailwind

<button class="bg-white [1]:bg-gray-800 text-black [2]:text-white border border-gray-300 [3]:border-gray-600 px-4 py-2 rounded">
  Dark Mode Button
</button>

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

Ahover

Bdark

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variants for different styles.

Missing the colon after the variant.

All three styles use the dark variant to change background, text, and border colors in dark mode.