TailwindCSSで背景にグラデーションカラーを適用する方法について、調べたことをまとめました。TailwindCSSで、背景にグラデーションカラーを適用するには、グラデーションの方向を決めるユーティリティクラスと、スタートのカラー、中間のカラー、終了のカラーを決めるユーティリティクラスを追加する必要があります。グラデーションで透明色の指定方法についても、解説します。
グラデーションの方向を指定するユーティリティクラス
グラデーションの方向を指定は、bg-gradient-to-{direction}というユーティリティクラスを使います。{direction}には、方向を入れます。
右方向にグラデーション
bg-gradient-to-rを使います。
<div class="bg-gradient-to-r from-blue-500"></div>
左方向にグラデーション
bg-gradient-to-lを使います。
<div class="bg-gradient-to-l from-red-500"></div>
下向きグラデーション
下方向は、bg-gradient-to-bを使います。
<div class="bg-gradient-to-b from-blue-500 via-green-500 to-yellow-200"></div>
右下グラデーション
右下方向にグラデーションカラーを適用するには、bg-gradient-to-brを使います。
<div class="bg-gradient-to-br from-blue-500 via-green-500 to-yellow-200"></div>
左下グラデーション
左下方向にグラデーションカラーを適用するには、bg-gradient-to-blを使います。
<div class="bg-gradient-to-bl from-blue-500 via-green-500 to-yellow-200"></div>
上向きグラデーション
<div class="bg-gradient-to-t from-blue-500 via-green-500 to-yellow-200"></div>
グラデーションの透明色、スタート色、中間色、終了色のユーティリティクラス
透明色
TailwindCSSは、from-{color}というユーティリティクラスを使うと、デフォルトで透明色にフェードアウトします。そのため、to-taransparentといった指定は不要です。※{color}の部分には、カラー指定のユーティリティクラスをいれてください。
スタート色
スタート色は、from-{color}を使います。from-blue-500というようなクラス名で指定します。
<div class="bg-gradient-to-r from-blue-500"></div>
中間色
中間色は、via-{color}を使います。via-green-500というようなクラス名で指定します。
<div class="bg-gradient-to-r from-blue-500 via-green-500"></div>
終了色
中間色は、to-{color}を使います。to-green-500というようなクラス名で指定します。
<div class="bg-gradient-to-r from-blue-500 via-green-500 to-yellow-200"></div>
スタート色を透明にする
from-transparentを使うと、スタートの色を透明にできます。
<div class="bg-gradient-to-r from-transparent via-green-500 to-yellow-200"></div>
おわりに
以上、TailwindCSSで背景にグラデーションを適用する方法と、グラデーションの方向と、カラーの指定方法を説明してみました。ボタンごとに色を変えるような場合でも、とても簡単にできて、便利です。
