Gradient utilities (from, via, to) in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a gradient background starting from blue.

Tailwind

<div class="bg-gradient-to-r [1]-blue-500 h-32 w-full"></div>

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

Agradient

Bto

Cfrom

Dvia

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'to' instead of 'from' for the start color.

Using 'via' which is for the middle color.

The 'from' utility sets the starting color of the gradient.

2fill in blank

medium

Complete the code to add a middle color in the gradient.

Tailwind

<div class="bg-gradient-to-r from-red-400 [1]-yellow-300 to-green-500 h-32 w-full"></div>

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

Afrom

Bvia

Cto

Dcolor

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'to' instead of 'via' for the middle color.

Using 'from' again instead of 'via'.

The 'via' utility adds a middle color to the gradient.

3fill in blank

hard

Fix the error in the gradient direction class.

Tailwind

<div class="bg-gradient-[1] from-purple-400 via-pink-500 to-red-500 h-32 w-full"></div>

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

Agradient-r

Bfrom-r

Cvia-r

Dto-r

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'from-r' or 'via-r' which are invalid.

Missing the 'to-' prefix in the direction.

The correct gradient direction class is 'bg-gradient-to-r' to go from left to right.

4fill in blank

hard

Fill both blanks to create a vertical gradient from blue to green.

Tailwind

<div class="bg-gradient-[1] [2]-blue-600 to-green-400 h-32 w-full"></div>

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

Ato-b

Bfrom

Cvia

Dto-r

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'to-r' for horizontal instead of vertical.

Using 'via' instead of 'from' for the start color.

Use 'to-b' for vertical gradient direction and 'from' to set the start color.

5fill in blank

hard

Fill all three blanks to create a diagonal gradient from pink through purple to blue.

Tailwind

<div class="bg-gradient-[1] [2]-pink-400 [3]-purple-600 to-blue-500 h-32 w-full"></div>

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

Ato-br

Bfrom

Cvia

Dto-tl

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'to-tl' instead of 'to-br' for direction.

Mixing up 'from' and 'via' prefixes.

Use 'to-br' for diagonal bottom-right direction, 'from' for start color, and 'via' for middle color.