これは、Tailwindcssで文字にグラデーションをつける方法を、わたしが覚えるためにただメモしただけのもの。
グラデーションの基本
- bg-gradient-to-方向（r,l,b,t,tr,tl,br,bl）
- from
- via-色（任意）
- to-色
以上の3つor4つを書けば、背景にグラデーションがつけられる。
例
<div class="h-10 w-full bg-gradient-to-r from-teal-700 via-sky-500 to-teal-300" ></div>bg-clip-text
背景の例を応用して、“text-gradient-…“としたいところだが、これは上手くいかない。tailwindにそのようなクラスは定義されていない。そこで、“bg-clip-text“を使う。
“bg-clip-text“は、背景を文字の形にするクラス。試しにピンク色の背景にこれを適用。このままでは、文字の色もそのままなので、“text-transparent```で文字を透明にして背景を見せる。
<div class="h-10 w-full bg-gradient-to-r from-teal-700 via-sky-500 to-teal-300 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に聞いたりして、その場ですぐ導入するけど、仕組みを知って書き方も覚えると気持ちいい。思ったことをすぐその場でできる方が気分的にもいいし、時間的にも効率が良い。