主にプログラミング関連のメモ帳 ♪(✿╹ヮ╹)ノ
書いてあるコードは自己責任でご自由にどうぞ。記事本文の無断転載は禁止です。
2021/05/06
相変わらず 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
は消えているけども)。
ということで今日のメモでした。