如何在Tailwind CSS中应用对角线渐变？能否自定义渐变角度？

一、用内置类快速实现基础对角线渐变 #

Tailwind CSS提供了预定义的渐变方向类，通过组合bg-gradient-to-[方向]+from-[颜色]+to-[颜色]就能快速实现常见对角线渐变：

• 左上→右下：bg-gradient-to-br
• 右上→左下：bg-gradient-to-bl
• 左下→右上：bg-gradient-to-tr
• 右下→左上：bg-gradient-to-tl

示例代码：

<!-- 左上到右下的蓝紫渐变 -->
<div class="w-full h-64 bg-gradient-to-br from-blue-500 to-purple-600"></div>

二、自定义角度实现精准渐变 #

如果内置方向满足不了需求（比如你提供的图需要特定角度的渐变），可以用Tailwind的任意值语法直接指定渐变角度，语法为bg-[linear-gradient(角度值,颜色1,颜色2,...)]。

角度值遵循CSS线性渐变规则：0deg代表向上，顺时针旋转，比如135deg对应左上到右下的对角线，225deg对应右下到左上的对角线。

示例代码（匹配你提供的图风格）：

<!-- 自定义135度的蓝紫渐变 -->
<div class="w-full h-64 bg-[linear-gradient(135deg,#1e40af,#8b5cf6)]"></div>

如果需要复用这个自定义渐变，可在tailwind.config.js中扩展主题，将其注册为可复用类：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      backgroundImage: {
        'custom-diag-gradient': 'linear-gradient(135deg, #1e40af 0%, #8b5cf6 100%)',
      },
    },
  },
  plugins: [],
}

之后直接用bg-custom-diag-gradient类即可应用该渐变：

<div class="w-full h-64 bg-custom-diag-gradient"></div>

内容的提问来源于stack exchange，提问作者Navdeep Yadav