Tailwind CSSでブレークポイントを設定する

Tailwind CSSでブレークポイントを設定する方法を試してみます。
使用環境はAastro 5.16.0 / Tailwind CSS 4.1.17です。

サンプルコード

ブレークポイントを設定するには、md:やlg:などあらかじめ用意されているブレークポイント名をclass名の前に付与します。

<p
  class="
    bg-sky-700
    sm:bg-red-700
    md:bg-blue-700
    lg:bg-orange-700
    xl:bg-lime-700
    2xl:bg-pink-700
  "
>テキスト</p>

これで画面幅によって背景色が切り替わるようになりました。
ブレークポイントのデモページ

上記で使用したブレークポイントの設定は以下の通りです。

上記は指定したブレークポイント以上の場合の設定でしたが、反対に指定したブレークポイント未満の設定も可能です。
max-XX:の形で指定します。

<p
  class="
    bg-sky-700
    max-sm:bg-red-700
    max-md:bg-blue-700
    max-lg:bg-orange-700
    max-xl:bg-lime-700
    max-2xl:bg-pink-700
  "
>テキスト</p>

これで指定したブレークポイント未満の場合にスタイルが適用されるようになりました。
ブレークポイントのデモページ2

上記で使用したブレークポイントの設定は以下の通りです。

以上と未満を組み合わせて設定することも可能です。

<p
  class="
    md:max-lg:bg-red-700
  "
>md～lg</p>
<p
  class="
    md:max-xl:bg-blue-700
  "
>md～xl</p>

ブレークポイントのデモページ3

デフォルトのブレークポイント値を変更したり、新しく追加することも可能です。
今回はAstroを使用しているので、src/styles/global.css 内に以下を追記します。

@import "tailwindcss";

@theme {
  --breakpoint-xs: 23.4375rem;
  --breakpoint-2xl: 100rem;
  --breakpoint-3xl: 120rem;
}

追加したブレークポイントがxs(375px)と3xl(1920px)で、2xlを96rem(1536px)から100rem(1600px)に変更しました。
実際に使ってみます。

<p
  class="
    bg-sky-700
    xs:bg-purple-700
    sm:bg-red-700
    md:bg-blue-700
    lg:bg-orange-700
    xl:bg-lime-700
    2xl:bg-pink-700
    3xl:bg-cyan-700
  "
>テキスト</p>

ブレークポイントを追加・変更するデモページ

デフォルトのブレークポイントを削除したい場合、src/styles/global.css 内でそのブレークポイント値にinitialを指定します。

@import "tailwindcss";

@theme {
  --breakpoint-lg: initial;
}

これでlgのブレークポイント値が削除されました。

<p
  class="
    bg-sky-700
    sm:bg-red-700
    md:bg-blue-700
    lg:bg-orange-700
    xl:bg-lime-700
    2xl:bg-pink-700
  "
>テキスト</p>

ブレークポイントを削除するデモページ

テーマに含めずに一時的なブレークポイントを使いたい場合、min-[XXX]:やmax-[XXX]:の形で設定することもできます。

<p
  class="
    max-[480px]:bg-blue-700
    min-[992px]:bg-red-700
  "
>テキスト</p>

一時的なブレークポイントを設定するデモページ