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.

Practice

1. What does the Tailwind class from-blue-500 do when used with a gradient background?

easy

A. It changes the text color to blue-500.

B. It sets the starting color of the gradient to blue-500.

C. It sets the ending color of the gradient to blue-500.

D. It sets the middle color of the gradient to blue-500.

Solution

1. Step 1: Understand gradient color stops

   The from- class in Tailwind sets the first color stop in a gradient.

2. Step 2: Identify the role of from-blue-500

   This class sets the gradient's start color to the blue-500 shade.

3. Final Answer:

   It sets the starting color of the gradient to blue-500. -> Option B

4. Quick Check:

   from- means start color [OK]

Hint: Remember: from = start color, via = middle, to = end [OK]

Common Mistakes:

• Confusing 'from-' with 'to-' or 'via-' classes
• Thinking it changes text color instead of background
• Assuming it sets the gradient direction

2. Which of the following is the correct Tailwind syntax to create a gradient that starts from red, passes through yellow, and ends in green?

easy

A. bg-gradient-from-red-500 via-yellow-400 to-green-500

B. bg-gradient-to-r from-red-500 to-yellow-400 via-green-500

C. bg-gradient-to-r from-red-500 via-yellow-400 to-green-500

D. bg-gradient-to-r via-red-500 from-yellow-400 to-green-500

Solution

1. Step 1: Check gradient direction syntax

   The correct direction syntax is bg-gradient-to-{direction}, here to-r means left to right.

2. Step 2: Verify color stop order

   The order must be from- (start), via- (middle), then to- (end). bg-gradient-to-r from-red-500 via-yellow-400 to-green-500 follows this order correctly.

3. Final Answer:

   <code>bg-gradient-to-r from-red-500 via-yellow-400 to-green-500</code> -> Option C

4. Quick Check:

   Correct syntax and order = bg-gradient-to-r from-red-500 via-yellow-400 to-green-500 [OK]

Hint: Use bg-gradient-to-{dir} with from-, via-, to- in order [OK]

Common Mistakes:

• Mixing order of from, via, to classes
• Using bg-gradient-from- instead of bg-gradient-to-
• Placing via- after to-

3. What will be the visible background gradient of this div?

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

medium

A. A vertical gradient from purple at top, through pink in middle, to red at bottom.

B. A horizontal gradient from purple on left, through pink in middle, to red on right.

C. A solid purple background with pink and red stripes.

D. No gradient, just a red background.

Solution

1. Step 1: Understand gradient direction

   bg-gradient-to-b means gradient goes from top to bottom (vertical).

2. Step 2: Analyze color stops

   from-purple-400 is start (top), via-pink-500 is middle, to-red-500 is end (bottom).

3. Final Answer:

   A vertical gradient from purple at top, through pink in middle, to red at bottom. -> Option A

4. Quick Check:

   to-b = vertical gradient, from/via/to colors in order [OK]

Hint: bg-gradient-to-b means vertical top-to-bottom gradient [OK]

Common Mistakes:

• Confusing to-b with to-r (vertical vs horizontal)
• Ignoring the via- color in the middle
• Thinking it creates stripes instead of smooth gradient

4. Identify the error in this Tailwind gradient class:

class="bg-gradient-to-l from-green-400 to-yellow-500 via-blue-500"

medium

A. The order of color stops is incorrect; 'via-' should come between 'from-' and 'to-'.

B. The gradient direction 'to-l' is invalid in Tailwind.

C. The 'via-' color must be the same as 'from-' color.

D. There is no error; this is a valid gradient class.

Solution

1. Step 1: Check gradient direction

   bg-gradient-to-l is valid and means gradient goes leftwards.

2. Step 2: Verify color stop order

   Order is from-green-400, to-yellow-500, and via-blue-500. Tailwind allows via- anywhere between from and to; order in class attribute does not matter.

3. Final Answer:

   There is no error; this is a valid gradient class. -> Option D

4. Quick Check:

   Gradient direction and colors are valid [OK]

Hint: Order of classes in attribute doesn't affect gradient correctness [OK]

Common Mistakes:

• Thinking class order matters for gradient stops
• Assuming 'to-l' is invalid direction
• Believing via- color must match from- color

5. You want a smooth diagonal gradient from blue to purple with a soft pink in the middle on a button. Which Tailwind classes correctly achieve this effect?

hard

A. bg-gradient-to-br from-blue-600 via-pink-300 to-purple-700

B. bg-gradient-to-tr from-purple-700 via-pink-300 to-blue-600

C. bg-gradient-to-br from-pink-300 via-blue-600 to-purple-700

D. bg-gradient-to-bl from-blue-600 via-purple-700 to-pink-300

Solution

1. Step 1: Choose correct gradient direction

   Diagonal from top-left to bottom-right is bg-gradient-to-br.

2. Step 2: Set color stops in correct order

   Start with blue (from-blue-600), middle pink (via-pink-300), end purple (to-purple-700).

3. Step 3: Verify options

   bg-gradient-to-br from-blue-600 via-pink-300 to-purple-700 matches direction and color order perfectly; others mix colors or directions incorrectly.

4. Final Answer:

   <code>bg-gradient-to-br from-blue-600 via-pink-300 to-purple-700</code> -> Option A

5. Quick Check:

   Diagonal + correct from/via/to colors = bg-gradient-to-br from-blue-600 via-pink-300 to-purple-700 [OK]

Hint: Match direction with color order: from-start, via-middle, to-end [OK]

Common Mistakes:

• Mixing up gradient directions (br vs tr vs bl)
• Placing colors in wrong from/via/to order
• Using middle color as start or end