A component for fixing an element's width to the current breakpoint.
container className sets the
max-width of an element to match the
min-width of the current breakpoint. This is useful if you'd prefer to design for a fixed set of screen sizes instead of trying to accommodate a fully fluid viewport.
Note that unlike containers you might have used in other frameworks, Tailwind's container does not center itself automatically and does not have any built-in horizontal padding.
To center a container, use the
<div className="container **mx-auto**"> <!-- ... --> </div>
To add horizontal padding, use the
<div className="container mx-auto **px-4**"> <!-- ... --> </div>
If you'd like to center your containers by default or include default horizontal padding, see the customization options below.