如何在Tailwind CSS中应用指定linear-gradient背景渐变

有两种实用方法可以实现你需要的渐变背景效果：

• 方式一：扩展Tailwind配置（推荐用于多次复用）
  修改项目根目录下的tailwind.config.js，在theme.extend.backgroundImage中添加自定义渐变：

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    content: ["./src/**/*.{html,js}"], // 根据你的项目实际路径调整
    theme: {
      extend: {
        backgroundImage: {
          'custom-white-gradient': 'linear-gradient(355.45deg, #FFFFFF 11.26%, rgba(255, 255, 255, 0) 95.74%)',
        },
      },
    },
    plugins: [],
  }
  

  配置完成后，就能在HTML元素中直接使用这个自定义类：

  <div class="bg-custom-white-gradient">你的内容</div>
  

• 方式二：使用任意值语法（适合单次使用）
  无需修改配置文件，直接通过Tailwind的任意值语法嵌入渐变代码：

  <div class="bg-[linear-gradient(355.45deg,#FFFFFF_11.26%,rgba(255,255,255,0)_95.74%)]">你的内容</div>
  

注意：如果需要将渐变应用到其他背景相关属性，只需替换bg-前缀为对应属性的前缀即可，比如用于背景遮罩时用mask-前缀。

内容的提问来源于stack exchange，提问作者0MUHAMMEDIRFAN