みかづきメモ

主にプログラミング関連のメモ帳 ♪(✿╹ヮ╹)ノ 書いてあるコードは自己責任でご自由にどうぞ。記事本文の無断転載は禁止です。

TailwindCSS で Container のサイズを調節したい

相変わらず CSS を書きたくないので TailwindCSS を使っているわけですが、
今回は .container の設定を変更するお話です。


TailwindCSS では、デフォルトで以下の Container 設定がされています。

Breakpoint Properties
none width: 100%
640px (sm) max-width: 640px
768px (md) max-width: 768px
1024px (lg) max-width: 1024px
1280px (xl) max-width: 1280px
1536px (2xl) max-width: 1536px

ただ、個人的には一時的であれ幅がスクリーンの 100% で表示されるのがちょっと気に食わないので、それを変更する方法。
ただし、 Breakpoint は変更しない。

このあたりを変更するには、いつも通り設定をいじってあげるだけで OK。
今回の場合は、下記のように変更した。

// @ tailwind.config.js
module.exports = {
  // 略
  plugins: [
    function({addComponents}) {
      addComponents({
        ".container": {
          maxWidth: "90%",
          "@screen sm": {
            maxWidth: "600px",
          },
          "@screen md": {
            maxWidth: "700px",
          },
          "@screen lg": {
            maxWidth: "900px",
          },
          "@screen xl": {
            maxWidth: "1200px",
          },
        }
      })
    },
  ],
}

こうすることで、 Container のサイズを変更できる (この場合は 2xl は消えているけども)。
ということで今日のメモでした。