如何将CSS线性渐变转换为Tailwind CSS线性渐变？

方法一：直接使用Tailwind任意值语法 #

Tailwind支持通过方括号包裹原生CSS值的任意值语法，你只需把原渐变表达式直接嵌入bg-[...]类中，注意将渐变参数里的空格替换为下划线_（避免被识别为类名分隔符）。

替换后的完整代码：

<section class="relative bg-[linear-gradient(152deg,#fff,#00bfd8_42%,#0083f5)] table w-full py-36 lg:py-44">

方法二：自定义主题渐变（推荐） #

如果觉得内嵌表达式的类名太长，可在tailwind.config.js中自定义渐变，后续直接使用简洁的类名：

1. 修改配置文件：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      backgroundImage: {
        'custom-gradient': 'linear-gradient(152deg,#fff,#00bfd8 42%,#0083f5)',
      },
    },
  },
}

2. 在HTML中使用自定义类：

<section class="relative bg-custom-gradient table w-full py-36 lg:py-44">

内容的提问来源于stack exchange，提问作者Sohaib Butt