こんにちは。エキサイトでデザイナーをしている齋藤です。
今回は、Tailwind CSSで画像を他の画像に合わせて切り抜く（マスクする）方法をご紹介します。
なお、本稿の内容は v4.1.12（2025年8月18日時点の最新版）のTailwind CSSを前提としています。
実現したいこと
冒頭、実現したいことを整理します。
以下のように、星型の画像の形に合わせて海の画像を切り抜いて表示することが今回のゴールです。
PhotoshopやFigmaを用いてあらかじめ切り抜いた画像を用意する方法もありますが、今回はTailwind CSSだけで実現します。
ユーティリティクラスのmask-*でマスクができる
Tailwind CSSのユーティリティクラスである、mask-*シリーズを使用すると画像のマスクができます。（v4.1.0で追加）
基本形のmask-[<value>]は、CSSプロパティのmask-imageに相当します。
mask-imageは2023年12月にすべての主要ブラウザで対応され、CSSだけで画像のマスクが可能になりました。
mask-[<value>]には切り抜きたい形の画像のURLを指定した上で、background-imageに相当するbg-[<value>]で切り抜きたい画像のURLを指定します。
例えば、星型の画像の形に合わせて海の画像を切り抜く場合は次のようにします。
また、切り抜く画像の調整にはbackground-sizeやbackground-positionを指定します。
<div class="mask-[url(/img/star.png)] bg-[url(/img/sea.png)] bg-cover bg-center"></div>
これで、Tailwind CSSだけで画像のマスクが実現できます。
まとめ
今回は、Tailwind CSSで画像を他の画像に合わせて切り抜く（マスクする）方法をご紹介しました。
本稿では基本形をお示ししましたが、境界線のぼかしなど様々なエフェクトが用意されていたりと、特にランディングページで有用かと思われます。
エフェクトについては公式ドキュメントをご確認ください。
Tailwind CSSを使用される方の一助となれば幸いです。ご精読ありがとうございました。
