SuperAPI AI 工具集

tailwind-syntax-gradients

前端与建站

查看项目

更新于 10-16 06:18

技能介绍

用途:编写 Tailwind CSS 渐变背景,包括线性、径向、锥形渐变,以及选择插值色彩空间与色标位置。

主要能力:v4 将渐变 API 从 v3 的八个线性方向扩展为 linear、radial、conic 三族,支持角度线性渐变、百分比色标位置和七种插值色彩空间。v3 仅支持线性渐变,其余需用任意值写法,前缀为 bg-gradient-*。

使用方式:v4 线性方向用 bg-linear-to-r 等,角度用 bg-linear-45,径向用 bg-radial 或 bg-radial-[at_top_left],锥形用 bg-conic 或 bg-conic-90。色标用 from-、via-、to-,位置用 from-10%、to-90%。插值修饰符写在斜杠后,如 bg-linear-to-r/oklch,默认 /oklab。任意值用 [value] 或 (--var),下划线转空格。

迁移:v3 转 v4 必须运行 npx @tailwindcss/upgrade,自动把 bg-gradient-* 重命名为 bg-linear-*,不要手工批量修改。

限制:v3 无原生径向、锥形、角度和色标位置工具,需任意值;v4 已弃用 theme() 改用 var(--color-*)。锥形渐变必须同时给出 from- 与 to-,否则塌缩为单色;仅写 from- 时 to- 默认透明。红到绿等互补色在 /srgb 下会出现灰色中点,需显式选择 /oklch 等。

适用场景:英雄区、按钮、徽章、光晕、锥形加载环等渐变背景,以及响应式、暗色模式、悬停等变体叠加。