tailwind-syntax-gradients

name	tailwind-syntax-gradients
description	Use when building linear, conic, or radial gradient backgrounds, picking an interpolation colour space (oklab default, oklch, srgb, hsl, longer-hue, shorter-hue), placing color stops at specific positions, or migrating a v3 `bg-gradient-to-r from-X to-Y` markup to v4's expanded gradient API with `bg-linear-*`, `bg-radial-*`, and `bg-conic-*`. Prevents the rename-trap (every v3 `bg-gradient-*` class is renamed to `bg-linear-*` in v4), the muddy-middle trap (sRGB interpolation produces a gray midpoint between saturated complementary colours where oklch keeps it vivid), the conic-without-from trap (`bg-conic` without a `from-{color}` produces an invisible gradient), and the v3-radial-by-arbitrary trap (v3 has no native bg-radial-* and forces `bg-[radial-gradient(...)]`). Covers every linear direction utility, the angle-based form (bg-linear-45), the conic and radial families, every from-/via-/to- color and position stop, and the seven interpolation modifiers. Keywords: tailwind gradient, bg-linear, bg-linear-to-r, bg-linear-45, bg-radial, bg-radial-[at_top_left], bg-conic, bg-conic-90, from-, via-, to-, from-10%, via-30%, to-90%, color stops, gradient position, interpolation modifier, oklab, oklch, srgb, hsl, longer-hue, shorter-hue, in_oklab, bg-gradient-to-r v3, bg-gradient renamed, gradient migration v3 to v4, conic gradient tailwind, radial gradient tailwind, vivid gradient, muddy gradient, gray midpoint, gradient middle gray, rainbow gradient, angle gradient.
license	MIT
compatibility	Designed for Claude Code. Requires Tailwind CSS v3.4 or v4.0+.
metadata	{"author":"OpenAEC-Foundation","version":"1.0"}

Tailwind CSS Gradients

v4 expanded the gradient API from v3's eight linear directions to a full three-family system (linear, radial, conic) with seven interpolation colour spaces, angle-based linear gradients, and percentage stop positions. v3 stays linear-only with the legacy bg-gradient-* prefix.

Companion skills :

• tailwind-syntax-utility-classes : the broader background utility surface
• tailwind-core-v3-vs-v4 : the v4-renamed utilities table (bg-gradient -> bg-linear)
• tailwind-impl-migration-v3-v4 : codemod that handles the rename

Quick Reference : v3 vs v4 Cheat Sheet

Need	v3	v4
Linear horizontal	bg-gradient-to-r from-blue-500 to-purple-500	bg-linear-to-r from-blue-500 to-purple-500
Linear diagonal	bg-gradient-to-tr from-A to-B	bg-linear-to-tr from-A to-B
Linear at custom angle	bg-[linear-gradient(45deg,#A,#B)] (arbitrary)	bg-linear-45 from-A to-B
Radial	bg-[radial-gradient(circle,#A,#B)] (arbitrary)	bg-radial from-A to-B
Radial at position	bg-[radial-gradient(at_top_left,#A,#B)] (arbitrary)	bg-radial-[at_top_left] from-A to-B
Conic	bg-[conic-gradient(#A,#B)] (arbitrary)	bg-conic from-A to-B
Conic at angle	bg-[conic-gradient(from_90deg,#A,#B)] (arbitrary)	bg-conic-90 from-A to-B
Vivid interpolation	not available natively	bg-linear-to-r/oklch from-red-500 to-blue-500
Stop position 10%	bg-[linear-gradient(to_right,#A_10%,#B)] (arbitrary)	bg-linear-to-r from-A from-10% to-B

ALWAYS run npx @tailwindcss/upgrade on v3-to-v4 migration : it renames every to automatically. NEVER hand-edit the rename across a large codebase ; the codemod is exhaustive.