用途
Tailwind Gradient Builder 是一个基于 Tailwind CSS 的渐变样式构建技能，目标是用 Tailwind 的工具类与任意值语法，快速生成现代 CSS 渐变效果，适用于背景、文字、边框、遮罩和动画等界面元素。
主要能力
- 线性渐变：支持两色与三色渐变，通过 from / via / to 定义色标，并提供 bg-gradient-to-t、to-tr、to-r、to-br、to-b、to-bl、to-l、to-tl 等方向类。
- 预设渐变：资料给出极光、日落、霓虹、森林雾、午夜城市、蜜桃日落等配色组合示例。
- 渐变文字：使用 bg-clip-text 与 text-transparent 实现文字渐变，并支持动画渐变文字。
- 径向渐变：通过任意值语法 bg-[radial-gradient(...)] 配合 from / via / to，支持椭圆、圆形以及顶部、右下、自定义百分比位置等变体。
- 锥形渐变：支持色轮、扫掠效果和饼图效果等写法。
- 网格渐变：通过多层径向渐变叠加实现，并提供可复用的 MeshGradient React 组件示例。
- 动画渐变：提供 gradient-x、gradient-y、gradient-xy 以及脉冲渐变的关键帧与动画配置示例。
- 玻璃拟态：使用 backdrop-blur、半透明背景与边框实现玻璃卡片，并提供 GlassCard 组件示例与渐变边框玻璃效果。
- 渐变边框与遮罩：包括伪元素式渐变边框、动画渐变边框、图片渐变遮罩和滚动区域淡出边缘。
- 暗色模式：提供适配暗色主题的渐变写法与网格渐变示例。
使用方式
核心工作流为：选择渐变类型（线性、径向、锥形或网格）→ 选择调色板并定义色标与位置 → 添加方向或角度 → 应用模糊、动画、玻璃拟态等效果 → 进行性能与可访问性优化。
使用上以 Tailwind 类名直接书写为主，例如 <div class="bg-gradient-to-r from-blue-500 to-purple-600"></div>。动画渐变需要在 tailwind.config.js 的 theme.extend 中补充 animation 与 keyframes 配置，资料给出了 gradient、gradient-x、gradient-y、gradient-xy、pulse-gradient、spin-slow 等配置片段。部分复杂效果（如网格渐变、玻璃卡片）提供了 React/TypeScript 组件示例，可直接参考实现。
适用场景
适合需要在 Tailwind CSS 项目中快速实现视觉渐变的场景，包括页面背景、标题文字、卡片边框、图片遮罩、滚动区域边缘淡出、玻璃拟态面板以及带动画的强调元素等。
限制与注意事项
资料未提供该技能的安装命令、收费方式、平台支持范围或具体效果保证，这些信息暂未提供。使用时应遵循资料中的性能建议：限制动画复杂度、谨慎使用 will-change、优先使用 CSS 而非 JS、减少渐变色标数量、在移动设备上测试网格渐变。同时需注意最佳实践：保持文字与渐变背景的对比度、使用设计系统内一致的调色板、动画保持克制、提供纯色回退、在暗色模式下测试，并检查叠加文字的对比度。