“Max-Width - Tailwind CSS”

max-w-screen-** クラスとは何か

単純にそのブロックの横幅の最大サイズを sm md lg xl 2xl に制限するクラス。それらのサイズ以下では親ブロックのサイズに追随する。

なぜこれを調べたか？

with を指定するためのスタイルの最大値が w-96 でわずか 384px までしかないのはなぜかを ChatGPT 先生に聞いたのが発端。

基本的にはレスポンシブデザインを前提としているため、親ブロックに対する割合やレスポンシブ対応するのに十分な（小さな）サイズの指定でレイアウトをデザインするコンセプトとなっているため。

その親ブロックとなるコンポーネントのサイズをコントロールする方法として max-w-screen-** を教えられたため。

以下サンプル

class=max-w-screen-sm

Two roads diverged in a yellow wood, And sorry I could not travel both And be one traveler, long I stood And looked down one as far as I could To where it bent in the undergrowth;

挙動の解釈

  • ブロック自体は左寄せ
  • 親ブロックのサイズが sm(640px) 以上の時、width = 640px
    • 固定になる。

class=max-w-screen-md

Two roads diverged in a yellow wood, And sorry I could not travel both And be one traveler, long I stood And looked down one as far as I could To where it bent in the undergrowth;

挙動の解釈

  • ブロック自体は左寄せ
  • 親ブロックのサイズが md(768px) 以上の時、width = 768px
    • 固定になる。

class=max-w-screen-lg

Two roads diverged in a yellow wood, And sorry I could not travel both And be one traveler, long I stood And looked down one as far as I could To where it bent in the undergrowth;

挙動の解釈

  • ブロック自体は左寄せ
  • 親ブロックのサイズが lg(1024px) 以上の時、width = 1024px
    • 固定になる。

class=max-w-screen-xl

Two roads diverged in a yellow wood, And sorry I could not travel both And be one traveler, long I stood And looked down one as far as I could To where it bent in the undergrowth;

挙動の解釈

  • ブロック自体は左寄せ
  • 親ブロックのサイズが xl(1280px) 以上の時、width = 1280px
    • 固定になる。

class=max-w-screen-2xl

Two roads diverged in a yellow wood, And sorry I could not travel both And be one traveler, long I stood And looked down one as far as I could To where it bent in the undergrowth;

挙動の解釈

  • ブロック自体は左寄せ
  • 親ブロックのサイズが 2xl(1536px) 以上の時、width = 1536px
    • 固定になる。
  • 指定サイズ未満では親ブロックのサイズに追随する。