Reactプロジェクトで背景画像を表示する際に色々迷ったのメモ。
Tailwind CSSでの画像の表示
Tailwindの場合はユーティリティクラスでパスを指定することで表示することができます。
<div class="bg-[url('/img/hero-pattern.svg')]">
<!-- ... -->
</div>ただ、このパスを手打ちでやる方法がちょっと怖いなと思いました。開発時は表示されたけどビルドして本番環境にアップしたら表示がされないとか…
で、他にシステムからパスを登録する確実そうないい方法ないかと思ったら、configから設定をできるようでした。下記公式のサイト。
module.exports = {
theme: {
extend: {
backgroundImage: {
'hero-pattern': "url('/img/hero-pattern.svg')",
'footer-texture': "url('/img/footer-texture.png')",
}
}
}
}あとはこのconfigで作ったクラスをタグに記述するだけです。
<div class="hero-pattern">
<!-- ... -->
</div>最初からこの方法を使えばよかった。。。
