Tailwind CSSでbackground-sizeとbackground-positionの両方を任意の値で設定する方法

こんにちは。エキサイトでデザイナーをしている齋藤です。

今回は、Tailwind CSSでbackground-sizeとbackground-positionの両方を任意の値で設定する方法をご紹介します。

実現したいこと

冒頭、実現したいことを整理します。

Tailwind CSSでは、background-sizeとbackground-positionを指定する場合は、どちらもbg-で始まるユーティリティクラスを使用します。

<!-- background-size: cover; -->
<div class="bg-cover"></div>

<!-- background-position: center; -->
<div class="bg-center"></div>

以下のようにユーティリティクラスの用意のない任意の値（Custom value）を指定したいとします。

div {
  background-size: 50% auto;
  background-position: bottom 10px right 20px;
}

この際、bg-[<value>]の構文で設定しようとするとうまくいきません。

<!-- syntax error: bg-[<value>]ではいっぺんに設定できない -->
<div class="bg-[50%_auto_bottom_10px_right_20px]"></div>

一方で今回実現したいのは、background-sizeとbackground-position両方を任意の値で設定することです。

bg-[<value>]の構文ではなく、background-sizeはbg-[length:<value>]を、background-positionはbg-[position:<value>]を使用することで区別して任意の値を設定できます。

プロパティ	任意の値を設定
`background-size`	`bg-[length:<value>]`
`background-position`	`bg-[position:<value>]`

なお、どちらか一方の場合は従来通りbg-[<value>]でも指定できます。

先にお示しした実現したいCSSを表現すると次のようになります。

<div class="bg-[length:50%_auto] bg-[position:bottom_10px_right_20px]"></div>

これで、background-sizeとbackground-position両方を任意の値で設定できます。

今回は、Tailwind CSSでbackground-sizeとbackground-positionの両方を任意の値で設定する方法をご紹介しました。

どちらも接頭辞がbg-のため、困惑される方も多いのではないでしょうか。

Tailwind CSSを使用される方の一助となれば幸いです。ご精読ありがとうございました。