Tailwind CSS Container Cheatsheet

Complete Tailwind v4 container reference with visual examples.
Click any class to copy to clipboard.

Container Class

Class	CSS / Behavior
`container`	`width: 100%; (with max-width at breakpoints)`
`sm:container`	`max-width: 640px (at sm breakpoint)`
`md:container`	`max-width: 768px (at md breakpoint)`
`lg:container`	`max-width: 1024px (at lg breakpoint)`
`xl:container`	`max-width: 1280px (at xl breakpoint)`
`2xl:container`	`max-width: 1536px (at 2xl breakpoint)`

Container Class - Visual Example

The container class sets a max-width that matches the current breakpoint.

container mx-auto

Centered container with max-width

Without container

Full width element

Container Max-Width at Each Breakpoint

Breakpoint	Min Width	Container Max-Width
`Default`	0px	100%
`sm`	640px	640px
`md`	768px	768px
`lg`	1024px	1024px
`xl`	1280px	1280px
`2xl`	1536px	1536px

Centering & Padding

Common patterns for centering containers and adding consistent padding.

container mx-auto px-4

Centered with horizontal padding

max-w-screen-lg mx-auto px-6

Fixed max-width with padding

Customizing Container in Config

You can customize the container class behavior in your Tailwind config to automatically center it, add padding, or set custom max-widths.

tailwind.config.js

// tailwind.config.js
module.exports = {
  theme: {
    container: {
      center: true,
      padding: '1rem',
      screens: {
        sm: '640px',
        md: '768px',
        lg: '1024px',
        xl: '1280px',
        '2xl': '1400px', // Custom max-width
      },
    },
  },
}

center: true - Automatically applies mx-auto

padding - Adds horizontal padding to the container

screens - Override the default max-widths at each breakpoint

Container Query Setup (v3.4+)

Class	CSS / Behavior
`@container`	`container-type: inline-size;`
`@container/name`	`container-type: inline-size; container-name: name;`
`@container-normal`	`container-type: normal;`

Container Query Size Reference

These prefixes apply styles based on the container's size, not the viewport.

Prefix	Min Container Width	CSS
`@xs:`	20rem (320px)	`@container (min-width: 20rem)`
`@sm:`	24rem (384px)	`@container (min-width: 24rem)`
`@md:`	28rem (448px)	`@container (min-width: 28rem)`
`@lg:`	32rem (512px)	`@container (min-width: 32rem)`
`@xl:`	36rem (576px)	`@container (min-width: 36rem)`
`@2xl:`	42rem (672px)	`@container (min-width: 42rem)`
`@3xl:`	48rem (768px)	`@container (min-width: 48rem)`
`@4xl:`	56rem (896px)	`@container (min-width: 56rem)`
`@5xl:`	64rem (1024px)	`@container (min-width: 64rem)`
`@6xl:`	72rem (1152px)	`@container (min-width: 72rem)`
`@7xl:`	80rem (1280px)	`@container (min-width: 80rem)`

Container Queries - Visual Example

Container queries let child elements respond to their container's size, not the viewport. Resize the container below to see the effect.

@container parent with responsive children

Card 1

Card 2

Card 3

Drag the right edge to resize this container

Common Patterns

Basic Page Layout

<div class="container mx-auto px-4">
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</div>

Full-Width Section with Contained Content

<section class="bg-gray-100 py-16">
  <div class="container mx-auto px-4">
    <!-- Content is contained -->
  </div>
</section>

Container Query Card

<div class="@container">
  <div class="flex flex-col @md:flex-row gap-4">
    <img class="w-full @md:w-1/3" />
    <div class="@md:w-2/3">
      <h2 class="text-lg @lg:text-2xl">
        Title
      </h2>
    </div>
  </div>
</div>

Named Container Query

<div class="@container/sidebar">
  <nav class="@md/sidebar:flex-col">
    <a>Home</a>
    <a>About</a>
  </nav>
</div>

Container vs Container Queries

Container class (container): Sets a responsive max-width based on the viewport. Use for page-level layout.

Container queries (@container): Allow child elements to style based on their parent's size, not the viewport. Use for reusable components that need to adapt to their context.

Container queries were added in Tailwind CSS v3.4 and are perfect for building truly responsive components that work in any layout context.

See Tailwind classes on any website

Frontend Hero's Tailwind Scanner shows you all Tailwind classes of any element. Inspect containers, layouts, spacing, and more.

Get Frontend Hero now →

Explore more Tailwind tools

Tailwind Grid Generator

Create grid layouts visually

Tailwind Flexbox Generator

Create flex layouts visually

Tailwind Gradient Generator

Create custom gradients

Tailwind Text Gradient

Gradient text effects

Tailwind Gradients Collection

275+ ready-to-use gradients

Tailwind Colors

Complete 240+ color palette

Tailwind Box Shadow Generator

Design multi-layer shadows

Tailwind Text Shadow

Add depth to text with shadows

Tailwind Filter Generator

Apply blur, brightness & more

Tailwind Transform Generator

Rotate, scale & translate elements

Tailwind Animation Generator

Create built-in & custom animations

Tailwind Transition Generator

Smooth hover transitions

Tailwind Config Generator

Generate your config file

Tailwind Input Generator

Design form inputs visually

Tailwind Class Sorter

Organize classes in order

Flexbox Cheatsheet

All flex utilities visualized

Overflow Cheatsheet

Control content overflow

Browse all free Tailwind tools →