Gradient utilities (from, via, to) in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the from- utility do in Tailwind CSS gradients?

The from- utility sets the starting color of a gradient background in Tailwind CSS.

beginner

How does the via- utility affect a gradient in Tailwind CSS?

The via- utility adds a middle color stop in a gradient, creating a smooth transition between the start and end colors.

beginner

What is the role of the to- utility in Tailwind CSS gradients?

The to- utility sets the ending color of a gradient background in Tailwind CSS.

beginner

How do you create a gradient from blue to green using Tailwind utilities?

Use bg-gradient-to-r from-blue-500 to-green-500 to create a horizontal gradient from blue to green.

intermediate

Why would you use the via- utility in a gradient?

Using via- adds a smooth color transition in the middle of the gradient, making it look more natural and visually appealing.

Which Tailwind utility sets the starting color of a gradient?

A bg-

B via-

C from-

D to-

The from- utility defines the gradient's starting color.

What does the via- utility do in a gradient?

A Removes the gradient

B Sets the ending color

C Defines the gradient direction

D Adds a middle color stop

The via- utility adds a middle color stop for smooth transitions.

How do you specify the gradient direction to go from left to right in Tailwind?

A bg-gradient-to-r

B bg-gradient-from-l

C bg-gradient-via-r

D bg-gradient-to-l

bg-gradient-to-r sets the gradient direction from left to right.

Which utility sets the ending color of a gradient in Tailwind?

A to-

B via-

C from-

D gradient-end-

The to- utility sets the gradient's ending color.

What is the correct way to create a gradient from red to yellow with a middle orange color?

A bg-gradient-from-red via-orange to-yellow

B bg-gradient-to-r from-red-500 via-orange-500 to-yellow-500

C bg-gradient-to-l from-yellow via-orange to-red

D bg-gradient-to-r from-yellow via-red to-orange

Use from-, via-, and to- utilities with colors in order.

Explain how the from-, via-, and to- utilities work together to create a gradient in Tailwind CSS.

Think about the gradient as a color path from start to end with optional middle colors.

Describe how you would create a horizontal gradient from blue to green with a light blue middle color using Tailwind utilities.

Remember the order: direction, from, via, to.

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