Tailwind CSS で背景画像を指定する方法

Tailwind CSS とは？

Tailwind CSS は、ユーティリティクラスを活用してスタイルを直接 HTML に記述できるスタイリングフレームワークです。シンプルなクラス名で様々なデザイン要素を実現できるため、カスタム CSS を最小限に抑え、素早くスタイルを適用することができます。

実装環境

• React
• Tailwind CSS 3.x

background-image

基本的には、bg-[url('画像のパス')] で背景画像を指定します。例えば、以下のコードで背景画像を設定します。

このコードでは、bg-no-repeat や bg-cover を使って、画像が繰り返されないようにしたり、要素全体にカバーするように設定しています。また、bg-top-left で画像の表示位置も指定しています。

css では以下のようになります。

top と left はそれぞれ、縦と横の位置を指定していて、bg-top-left でまとめて指定できます。

Next.js で指定する場合

Next.js や React の場合は、bg-[url('画像のパス')] で実現できます。

background-clip

background-clip をテキストに適用すると、テキスト部分だけに背景をクリップさせることができます。これにより、文字そのものが背景画像やグラデーションの一部のように見える面白い視覚効果が生まれます。

background-color

最後に、background-color の設定を見てみましょう。Tailwind CSS では、bg-{color} のようにシンプルに背景色を指定できます。

例えば、背景を青にしたい場合、以下のようにします。

bg-blue-500 というクラスを使うことで、簡単に背景色を指定できます。h-32 や w-32 で高さや幅も指定しているので、カスタマイズが非常に簡単です。

css で同じことを行うと以下のようになります。

Tailwind CSS を使うと、直感的にスタイルを適用できるので、CSS ファイルをわざわざ記述する必要がなく、コードをよりシンプルに保つことができます。

まとめ

Tailwind CSS では、ユーティリティクラスを使って手軽に背景画像や色を指定することができます。bg-[url()] で背景画像を設定したり、bg-clip-text でテキストに背景をクリップするなど、非常に柔軟にスタイリングできます。