TailwindCSSを使っている時に、background-image を使いたいけど、指定方法に迷った経験があったので、この記事を書いてます。
結論から言うと、Tailwindのユーティリティクラスとしてバックグラウンドイメージを扱うことが可能になります。
この記事ではその方法について解説します。
目次
tailwind.config.jsにバックグラウンドイメージを設定する
tailwind.config.jsに以下のように設定することで、クラス名を使用してバックグラウンドイメージを設定できます。
module.exports = {
theme: {
extend: {
backgroundImage: {
'custom-image': "url('/images/custom.webp')"
}
}
}
}url()の中身は、ご自身のプロジェクトのパスを設定ください。
HTMLの書き方
bg-[tailwind.config.jsで設定したプロパティ名] でbackground-image を指定することができるようになります。
<div class="bg-custom-image bg-contain bg-left-top bg-no-repeat w-full min-h-min h-full block">
</div>まとめ Tailwind CSSでbackground-imageを設定する方法
結構簡単にできました。
これを使うと、Breakpoint prefix を使ってレスポンシブもめっちゃやりやすいと思いました。