“Container - Tailwind CSS”

container クラスとは何か

containerクラスは要素の幅を現在のブレイクポイントに固定するためのコンポーネントクラス。

ブレイクポイントとはレスポンシブデザインのために TailwindCSS で定義された横幅サイズの区切りのこと。その区切りサイズは以下の様に定義されている。

`sm`	`640px`
`md`	`768px`
`lg`	`1024px`
`xl`	`1280px`
`2xl`	`1536px`

「要素の幅を現在のブレイクポイントに固定する」とは、つまり親ブロック（この HTML のサンプルでは body タグ）の横幅によってこれらいずれかの横幅に固定すると言うこと。具体的には container の横幅は以下の特徴を持つ。

親ブロックの横幅が sm(640px) 未満の時、最大幅を親ブロックと同じサイズにする（ブレイクポイント未満は完全追従）
親ブロックの横幅が sm(640px) =< md(768px) の間、最大幅を 640px に固定する
親ブロックの横幅が md(768px) =< lg(1024px)の間、最大幅を 768px に固定する
親ブロックの横幅が lg(1024px) =< xg(1280px )の間、最大幅を 1024px に固定する
親ブロックの横幅が xl(1280px) =< 2xl(1536px )の間、最大幅を 1280px に固定する
親ブロックの横幅が 2xl(1536px) 以上の時、最大幅を 1536px に固定する

なので、ブラウザウィンドウの横幅を変えると段階的にサイズが変わって見える。

以下サンプル

class=`container`

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;

挙動の解釈

まずブロックは親ブロック body に対して左寄せがデフォルト。

ドキュメントには container は width: 100%; と同じと書かれているが container は「現在のブレイクポイントに固定する」ものなので段階的に伸縮する。

class=`container mx-auto`

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;

挙動の解釈

mx-auto は container と一緒に使うとセンタリングする挙動になる。これは mx-auto が

margin-left: auto;
margin-right: auto;

であるため。ただブロックの横幅は container の特性 = ブレイクポイント毎の固定幅なのでその点注意。

class=`container mx-auto w-96`

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;

挙動の解釈

container 指定にかかわらずさらに w-96 という横幅指定をしている矛盾した設定。

Chrome では container が優先され、Safari では w-96 が優先された。実用上はあまり意味の無い設定サンプル

class=`container mx-48`

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;

挙動の解釈

mx-48 は左右マージン12rem と同じだが、container は mx-auto ではない限り左寄せになる様だ。したがって実質的に左のマージン 12rem だけが有効になる。

そして肝心の container の横幅の計算だが、これはマージン指定が無いとき同じ計算によって算出されるらしい。したがってウィンドウ幅を変えたときの width は単に container だけを指定したブロックと同じになる。

class=`container mx-auto px-4`

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;

挙動の解釈

追加した px-4 はあくまでコンテナブロック内のパディングであり、フレーミングには影響ない。

class=`md:container md:mx-auto`

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) を越えるまではウィンドウ幅に追従するが、md(768px) 以上になるとブレイクポイント毎の固定幅となる。

ちなみにより分かり易いように lg に変えたところ、lg(1024px) を越えてもブレイクポイント毎のサイズ固定にならなかった。バグの可能性有り。