Gradient utilities (from, via, to) in Tailwind - Mini Project: Build & Apply

Create a Colorful Gradient Background with Tailwind CSS

📖 Scenario: You want to make a webpage section that looks bright and colorful using a smooth gradient background. This will make your page look modern and attractive, like a sunset sky blending colors.

🎯 Goal: Build a simple webpage section with a gradient background that uses Tailwind CSS gradient utilities: from, via, and to. The gradient should smoothly blend three colors horizontally.

📋 What You'll Learn

Use Tailwind CSS classes to create a horizontal gradient background

Use from-pink-500 as the start color

Use via-yellow-400 as the middle color

Use to-green-500 as the end color

Add text inside the section that is easy to read on the gradient background

Make sure the section is at least 20rem tall and full width

Use semantic HTML with a section element

💡 Why This Matters

🌍 Real World

Gradient backgrounds are popular in modern web design to create visually appealing sections like headers, banners, or call-to-action areas.

💼 Career

Knowing how to use Tailwind CSS gradient utilities helps you quickly style websites with professional-looking color transitions, a valuable skill for frontend developers.

1

Create the basic HTML structure with a section

Write the basic HTML5 structure with a section element that has the classes h-80 and w-full to set height and width. Inside the section, add a p tag with the text "Welcome to the colorful gradient section!".

Tailwind

  Welcome to the colorful gradient section!

Need a hint?

Use a section tag with Tailwind classes h-80 for height and w-full for full width. Add a paragraph inside with the exact text.

2

Add the gradient background with bg-gradient-to-r

Add the Tailwind class bg-gradient-to-r to the existing section element to create a horizontal gradient background from left to right.

Tailwind

  Welcome to the colorful gradient section!

Need a hint?

Add bg-gradient-to-r to the section class list to make the gradient go from left to right.

3

Add the gradient colors using from-pink-500 and to-green-500

Add the Tailwind classes from-pink-500 and to-green-500 to the section element to set the start and end colors of the gradient.

Tailwind

  Welcome to the colorful gradient section!

Need a hint?

Add from-pink-500 and to-green-500 to the class attribute to set gradient start and end colors.

4

Add the middle gradient color using via-yellow-400 and style the text

Add the Tailwind class via-yellow-400 to the section element to add a middle color to the gradient. Also add flex, items-center, justify-center, and text-white classes to center the text vertically and horizontally and make the text white for good contrast.

Tailwind

  Welcome to the colorful gradient section!

Need a hint?

Add via-yellow-400 to add the middle gradient color. Use flex, items-center, and justify-center to center the text. Use text-white for readable text color.