Gradient Border Plugin for Tailwind CSS

Florian Kiem による Tailwind CSS v4 用プラグイン。mask-composite を使い、角丸・ピル・サークルなど任意の border-radius に追従するグラデーションのストロークを要素に描く。

導入

npm i gradient-border-plugin

Tailwind スタイルシートに @import 'gradient-border-plugin' を追加するだけ。

主なユーティリティ

• gradient-border — グラデーションストロークを有効化する基本クラス
• 1px〜4px の太さバリアント
• bg-linear-to-* 系の方向指定（Tailwind の命名規則に合わせている）
• gradient-border-from-* / gradient-border-via-* / gradient-border-to-* — Tailwind の全カラー＋alpha 指定に対応
• animate-gradient-border — グラデーションを回転させ続けるアニメーション。--gradient-border-duration で速度調整
• --gradient-border を直接上書きすれば、conic や radial、任意のグラデーションも適用可能

例: gradient-border gradient-border-from-blue-500 gradient-border-to-purple-600 で青→紫のグラデーション枠線が描ける。