Responsive utility overrides in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the text color red on small screens.

Tailwind

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

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

Ablue

Bred

Cgreen

Dyellow

Attempts:

3 left

💡 Hint

Common Mistakes

Using a color name that doesn't exist in Tailwind.

Forgetting the number after the color name.

The class text-red-500 sets the text color to red.

2fill in blank

medium

Complete the code to make the background blue only on medium screens and larger.

Tailwind

<div class="[1]:bg-blue-500">Content</div>

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

Asm

Bxl

Clg

Dmd

Attempts:

3 left

💡 Hint

Common Mistakes

Using sm: which applies on small screens, not medium.

Forgetting the colon after the prefix.

The prefix md: applies styles starting at medium screen sizes.

3fill in blank

hard

Fix the error in the code to override padding on large screens.

Tailwind

<div class="p-4 [1]:p-8">Box</div>

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

Alg

Bmd

Csm

Dxl

Attempts:

3 left

💡 Hint

Common Mistakes

Using md: which applies on medium screens, not large.

Using sm: which is too small to override large screen styles.

The lg: prefix applies styles starting at large screen sizes, overriding smaller sizes.

4fill in blank

hard

Fill both blanks to make the text green on small screens and blue on medium screens.

Tailwind

<p class="[1]:text-green-500 [2]:text-blue-500">Colors</p>

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

Asm

Bmd

Clg

Dxl

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping the prefixes so colors apply incorrectly.

Using lg: or xl: which are too large for this task.

sm: applies styles on small screens, md: applies on medium screens and overrides small.

5fill in blank

hard

Fill all four blanks to set margin 2 on default, margin 4 on medium, and margin 6 on large screens.

Tailwind

<div class="m-[1] [2]:m-[3] [4]:m-6">Box</div>

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

A2

Bmd

C4

Dlg

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up margin sizes and prefixes.

Forgetting to add the prefix colon.

Default margin is m-2. md:m-4 applies margin 4 on medium screens. lg:m-6 applies margin 6 on large screens.