こんにちは。エキサイトでデザイナーをしている齋藤です。
今回は、Tailwind CSSでグラデーション背景をスタイリングする方法をご紹介します。
なお、本稿ではv4.1（2025年4月21日時点の最新版）のTailwind CSSを前提とします。
実現したいこと
冒頭、実現したいことを整理します。
CSSでは要素の背景色をグラデーションにすることもできます。
通常のCSSではlinear-gradient()関数を使用します。
例えば、「上方向に赤から青」というグラデーションを表現する場合は以下のようになります。
background: linear-gradient(to top, blue, red);
今回実現したいのは、先の例と同様に、
- グラデーションの方向
- 始点の色
- 終点の色
を指定したグラデーション背景をTailwind CSSでもスタイリングすることです。
Tailwind CSSでlinear-gradientを実現する方法
Tailwind CSSでは以下のユーティリティクラスを用いることで、linear-gradientを実現できます。
| ユーティリティクラス | 説明 |
|---|---|
bg-linear-* |
グラデーションの方向 |
from-* |
始点の色 |
to-* |
終点の色 |
先の例、「上方向に赤から青」をTailwind CSSで表現すると次のようになります。
<div class="bg-linear-to-t from-red-500 to-blue-500"></div>
他にも、deg値や中間色の指定、放射状や円錐のグラデーションも表現できます。
詳しくは公式ドキュメントをご覧ください。
まとめ
今回は、Tailwind CSSでグラデーション背景をスタイリングする方法をご紹介しました。
linear-gradient()関数の場合、引数の値をどう指定したらよいか迷いがちな一方で、Tailwind CSSでは、始点はfrom-*、終点はto-*などと単語で特定できるので分かりやすいのではないでしょうか。
なお、公式ドキュメントではグラデーション背景に関する説明は、background-imageのページに記載されていますので、ご注意ください。
Tailwind CSSを使用される方の一助となれば幸いです。ご精読ありがとうございました。
