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.