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。
今回の場合は、下記のように変更した。

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 は消えているけども)。
ということで今日のメモでした。