漸變背景是一種常見的設計元素，可以讓您的網站外觀更有深度和視覺吸引力。您可以使用 Tailwind CSS 製作線性漸變和徑向漸變，而無需編寫任何自定義 CSS。從而簡化流程。
使用 Tailwind 新增漸變背景的方法
您可以使用 Tailwind 提供的 bg-gradient-to-classes 建立線性漸變背景。
選擇漸變方向：Tailwind CSS 為線性漸變提供了幾個預定義的方向
bg-gradient-to-t （頂部）
bg-gradient-to-b（底部）
bg-gradient-to-l（左）
bg-gradient-to-r（右）
選擇漸變顏色：使用 from-*、via-* 和 to-* 類定義漸變的顏色。例如：
from-blue-500 （起始顏色）
via-purple-500（中間顏色）
TO-PINK-500（結束顏色）
組合類：將這些類應用於您的元素。例如：
<div class="bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 h-64 w-full"> <!-- Content goes here --> </div>
示例：這演示了使用 Tailwind CSS 的具有線性漸變背景的居中標題，跨越全寬和固定高度。
<!DOCTYPE html> <html> <head> <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <div class="bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 h-64 w-full flex items-center justify-center text-white"> <h1 class="text-2xl">Linear Gradient Background</h1> </div> </body> </html>
輸出：
使用 Tailwind 新增漸變背景
示例：此示例說明了一個全屏網頁，該網頁具有自定義線性漸變背景、居中文字和使用 Tailwind CSS 的號召性用語按鈕。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linear Gradient Example</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<style>
/* Optional: Custom Tailwind CSS configuration for gradient background */
@layer utilities {
.bg-gradient-custom {
background-image: linear-gradient(to right, #1e3a8a,
#6d28d9, #ec4899);
}
}
</style>
</head>
<body>
<section class="bg-gradient-custom h-screen flex
items-center justify-center text-center">
<div>
<h1 class="text-5xl font-bold mb-4">
Discover the Future of Web Design
</h1>
<p class="text-xl mb-8">
Leverage the power of modern CSS
frameworks to create stunning,
responsive designs with ease.
</p>
<a href="#" class="bg-white text-blue-900
hover:bg-gray-100 font-semibold py-2 px-6
rounded-lg transition-colors duration-300">
Get Started
</a>
</div>
</section>
</body>
</html>
輸出：
使用 Tailwind 新增漸變背景
