Container - Keep React

Table of Contents#

• Container Breakpoints
• Centering Container
• Horizontal padding
• Breakpoints padding
• Reference

Container Breakpoints#

The container class sets the maximum width of an element to match the minimum width of the current screen size. This is useful if you want to design for specific screen sizes instead of a fully flexible layout.

Centering Container#

To automatically center containers, you can enable the center option as true in your tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    container: {
      center: true
    }
  }
}

Horizontal padding#

You can add horizontal padding to containers by setting the padding option in your tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    container: {
      padding: '2rem',
    },
  },
}

Breakpoints padding#

If you need different padding for each screen size, you can specify a default value and override it for specific breakpoints using an object:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    container: {
      padding: {
        DEFAULT: '1rem',
        sm: '2rem',
        lg: '4rem',
        xl: '5rem',
        '2xl': '6rem',
      },
    },
  },
}

Reference#

If you want to know more about container class then you can read the documentation of tailwind css container.