กำหนดขนาด Container เองใน Tailwind CSS

สำหรับคนที่ใช้งาน Tailwind CSS ในการปรับแต่งหน้าเว็บไซต์ของตัวเอง ก็คงเคยใช้ class container กันมาแล้ว ซึ่งตัว container มันจะกำหนดขนาดความกว้างมาให้แล้วตามเอกสาร

เราสามารถกำหนดขนาดของ container ได้โดยแก้ไขไฟล์ tailwind.config.jsดังนี้

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    ...
  },
  corePlugins: {
    container: false
  },
  plugins: [
    function ({ addComponents }) {
      addComponents({
        ".container": {
          maxWidth: "100%",
          "@screen sm": {
            maxWidth: "640px"
          },
          "@screen md": {
            maxWidth: "768px"
          },
          "@screen lg": {
            maxWidth: "1024px"
          },
          "@screen xl": {
            maxWidth: "1280px"
          }
        }
      });
    }
  ]
};

เพียงแค่นี้เราก็สามารถกำหนดขนาด container ในแต่ละหน้าจอได้แล้ว...