Tailwindで文字にグラデーションをつける

これは、単なる私的メモです。誰かの参考になれば幸いです。

グラデーションの基本

1. bg-gradient-to-方向（r,l,b,t,tr,tl,br,bl）
2. from
3. via-色（任意）
4. to-色

以上の3つor4つを書けば、背景にグラデーションがつけられる。

例

<div class="h-10 w-full bg-gradient-to-r from-teal-700 via-sky-500 to-teal-300" ></div>

これはTailwind v3の書き方です。Tailwind v4ではbg-gradientではなくbg-linearと書きます。v4ではその他にも、bg-radialやbg-conicといった、球や円柱形のグラデーションもつかえます。

bg-clip-text

背景の例を応用して、text-gradient-...としたいところだが、これは上手くいかない。tailwindにそのようなクラスは定義されていない。そこで、``bg-clip-text``を使う。

bg-clip-textは、背景を文字の形にするクラス。試しにピンク色の背景にこれを適用。このままでは、文字の色もそのままなので、``text-transparent```で文字を透明にして背景を見せる。

<div class="h-10 w-full bg-pink-500 bg-clip-text text-center text-transparent" >テストテストテスト</div>

文字にグラデーションをつける

上記2つを組み合わせれば、グラーデーション背景を文字の形にして、グラーデーションのついた文字を見かけ上つくることができる。

<div class="h-10 w-full bg-gradient-to-r from-teal-700 via-sky-500 to-teal-300 text-center bg-clip-text text-transparent" >テストテストテスト</div>

いつもやり方だけググったりAIに聞いたりして、その場で理解してすぐ導入して、忘れるだけ。仕組みを知って書き方も覚えると気持ちいい。思ったことをすぐその場でできる方が気分的にもいいし、時間的にも効率が良い。