NextJS中用Tailwind CSS实现多元素背景渐变裁剪

核心结论 #

Tailwind CSS 没有直接提供这种"反向裁剪"的内置工具类，但可以通过 CSS 的 mask 属性结合自定义 Tailwind 工具类实现你要的效果——按钮区域显示渐变背景，其余区域为黑色，类似反向的 bg-clip-text。

实现步骤 #

1. 扩展Tailwind配置（添加自定义mask工具类）

在 tailwind.config.js 中添加以下配置，让我们可以用Tailwind类名控制遮罩：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      maskImage: {
        'button-clip': 'linear-gradient(black, black)',
      },
      maskMode: {
        'alpha': 'alpha',
      },
      maskComposite: {
        'exclude': 'exclude',
      },
    },
  },
  plugins: [],
}

2. 修改组件代码

调整结构，通过遮罩层实现渐变仅显示在按钮区域：

return (
  <div className="flex mt-10 flex-col items-center">
    <div className="relative bg-black">
      {/* 渐变背景层：通过mask裁剪，仅在按钮区域显示 */}
      <div className="absolute inset-0 bg-gradient-to-br from-[#70d6ff] via-[#ff70a6] to-[#e9ff70] mask-button-clip mask-alpha mask-composite-exclude"></div>
      
      {/* 按钮容器：设置黑色背景作为遮罩基准，按钮保持透明 */}
      <div className="relative p-4 font-semibold grid grid-cols-3 items-center bg-black">
        <button className="bg-transparent border rounded p-2 text-white" onClick={() => setView(10)}>Kelas 10</button>
        <button className="bg-transparent border rounded p-2 ml-2 text-white" onClick={() => setView(11)}>Kelas 11</button>
        <button className="bg-transparent border rounded p-2 ml-2 text-white" onClick={() => setView(12)}>Kelas 12</button>
        
        <div className="grid grid-cols-2 col-span-3 space-x-2 mt-2">
          <button className="bg-transparent border rounded p-2 text-white" onClick={setDateYesterday}>Kemarin</button>
          <button className="bg-transparent border rounded p-2 text-white" onClick={setDateTommorow}>Besok</button>
        </div>
        
        <button className="bg-transparent border rounded p-2 col-span-3 mt-2 text-white" onClick={handleCopy}>{copyMessage}</button>
      </div>
    </div>
    <Display />
  </div>
)

原理说明 #

• 最外层容器设置黑色背景，作为按钮以外区域的底色。
• 绝对定位的渐变层覆盖整个容器，通过mask属性实现裁剪：
  • mask-image: linear-gradient(black, black) 创建全黑遮罩层
  • mask-mode: alpha 基于遮罩的透明度通道裁剪
  • mask-composite: exclude 让按钮容器的黑色区域排除渐变层，最终只有按钮区域显示渐变，其余区域显示黑色。

无配置替代方案 #

如果不想修改Tailwind配置，直接用内联样式实现遮罩：

<div className="absolute inset-0 bg-gradient-to-br from-[#70d6ff] via-[#ff70a6] to-[#e9ff70]" style={{
  maskImage: 'linear-gradient(black, black)',
  maskMode: 'alpha',
  maskComposite: 'exclude'
}}></div>

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