Gradient utilities (from, via, to) in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What color gradient will this Tailwind CSS code produce?

Consider the following Tailwind CSS classes applied to a div:

class="bg-gradient-to-r from-red-500 via-yellow-300 to-green-500"

What is the visual gradient direction and color sequence you will see?

Tailwind

<div class="bg-gradient-to-r from-red-500 via-yellow-300 to-green-500 h-24 w-full"></div>

A A horizontal gradient from right to left: green to yellow to red

B A horizontal gradient from left to right: red to yellow to green

C A diagonal gradient from top-left to bottom-right: green to yellow to red

D A vertical gradient from top to bottom: red to yellow to green

💡 Hint

The class 'bg-gradient-to-r' means the gradient goes to the right (horizontal).

The 'bg-gradient-to-r' sets the gradient direction from left to right. The colors start with 'from-red-500', pass through 'via-yellow-300', and end with 'to-green-500'. So the gradient flows horizontally from red to yellow to green.

📝 Syntax

intermediate

Which Tailwind CSS class is invalid for gradient colors?

Which of the following Tailwind CSS classes will cause an error or not apply a gradient color properly?

A from-blue-400 via-purple-500 to-pink-600

B from-indigo-500 via-gray-200 to-white

C from-red-600 to-yellow-300

D from-green-300 via to-yellow-400

💡 Hint

Check if all gradient color classes have a valid color and shade after 'via'.

Option D has 'via' without a color or shade specified, which is invalid and will not apply the gradient correctly. All gradient color utilities require a valid color class after 'from', 'via', or 'to'.

🧠 Conceptual

advanced

How does the 'via' color affect a Tailwind CSS gradient?

In Tailwind CSS gradients, what role does the 'via' color play compared to 'from' and 'to' colors?

A 'via' defines an intermediate color that the gradient passes through between 'from' and 'to'.

B 'via' replaces the 'to' color and ends the gradient.

C 'via' sets the background color behind the gradient.

D 'via' is ignored if 'to' is present.

💡 Hint

Think about how gradients blend colors smoothly.

The 'via' color is an intermediate stop in the gradient. It creates a smooth transition from the 'from' color to the 'to' color by adding a middle color stop.

❓ selector

advanced

Which Tailwind CSS class combination creates a vertical gradient from blue to pink with a purple middle?

You want a vertical gradient that starts with blue, passes through purple, and ends with pink. Which class set achieves this?

A bg-gradient-to-t from-pink-400 via-purple-600 to-blue-500

B bg-gradient-to-r from-blue-500 via-purple-600 to-pink-400

C bg-gradient-to-b from-blue-500 via-purple-600 to-pink-400

D bg-gradient-to-l from-pink-400 via-purple-600 to-blue-500

💡 Hint

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

The class 'bg-gradient-to-b' sets a vertical gradient from top to bottom. 'from-blue-500' starts the gradient with blue at the top, 'via-purple-600' adds purple in the middle, and 'to-pink-400' ends with pink at the bottom.

❓ accessibility

expert

What accessibility consideration is important when using Tailwind CSS gradients with 'from', 'via', and 'to' colors?

When applying gradients using 'from', 'via', and 'to' colors in Tailwind CSS, which accessibility practice is most important to ensure good readability?

A Ensure sufficient contrast between text and gradient background colors for readability.

B Use only light colors in gradients to avoid eye strain.

C Avoid using 'via' colors as they confuse screen readers.

D Apply gradients only on decorative elements, never on backgrounds.

💡 Hint

Think about how users with vision difficulties read text over backgrounds.

Good contrast between text and background is essential for readability and accessibility. Gradients can reduce contrast if colors are too similar or light, so choose colors carefully to maintain clear text visibility.

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