なつねこメモ

主にプログラミング関連のメモ帳 ♪(✿╹ヮ╹)ﾉ

2021/05/06

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