LEGACY Tailwind CSS v3-era example, archived unchanged. Kept for reference only — it uses the v3 Play CDN and JS config, both removed in v4. Current documentation →
Back to Main Documentation Official Docs

Tailwind CSS Container & Spacing

Master the art of creating perfect layouts with container utilities and space management in Tailwind CSS

What are Tailwind CSS Container & Spacing Utilities?

Container and spacing utilities in Tailwind CSS provide the foundation for creating well-structured, responsive layouts. They control how elements are sized, spaced and contained within your design.

These utilities help maintain consistent spacing through your project, creating visual rhythm and hierarchy while ensuring your layouts work seamlessly across different screen sizes.

Key Features

  • Container for responsive width control
  • Margin for external spacing
  • Padding for internal spacing
  • Space-between for consistent gaps

Pro Tip: When creating responsive designs, combine container utilities with spacing utilities and responsive prefixes to create layouts that adapt perfectly to all screen sizes.

Containers

Containers are used to constrain content width within a specified max-width. By default, they're centered horizontally and responsive to different screen sizes. 

<div class="container mx-auto">
  <!-- Your content here -->
</div>

Container Breakpoints

Breakpoint Screen Width Container Max-Width
Default - width: 100%
sm 640px max-width: 640px
md 768px max-width: 768px
lg 1024px max-width: 1024px
xl 1280px max-width: 1280px
2xl 1536px max-width: 1536px

Container Example

This div is contained within the container class 
<div class="container mx-auto">
  <div class="bg-indigo-600 p-6 rounded text-center text-white">
    This div is contained within the container class
  </div>
</div>

Pro Tip: Use the container in combination with center utilities like mx-auto to ensure your content stays neatly within the desired width and is properly centered.

Margin

Margin utilities control the space outside elements. Tailwind provides utilities for all sides (m), horizontal sides (mx), vertical sides (my), and individual sides (mt, mr, mb, ml). 

<div class="m-4">All sides margin</div>
<div class="mx-4">Horizontal margin</div>
<div class="my-4">Vertical margin</div>
<div class="mt-4">Top margin</div>
<div class="mr-4">Right margin</div>
<div class="mb-4">Bottom margin</div>
<div class="ml-4">Left margin</div>

Margin Examples

m-4
margin: 1rem (16px)
mx-4
margin-left: 1rem; margin-right: 1rem;
my-4
margin-top: 1rem; margin-bottom: 1rem;
mt-6
margin-top: 1.5rem (24px)

More Margin Examples

mr-4
margin-right: 1rem (16px)
mb-8
margin-bottom: 2rem (32px)
ml-2
margin-left: 0.5rem (8px)

Arbitrary Margin Values

Tailwind allows for arbitrary values using square bracket notation when you need specific margins not included in the default spacing scale. 

<div class="ml-[200px]">Custom left margin of 200px</div>
ml-[200px]
margin-left: 200px
200px margin

Padding

Padding utilities control the space inside elements. Similar to margin, Tailwind provides utilities for all sides (p), horizontal sides (px), vertical sides (py), and individual sides (pt, pr, pb, pl). 

<div class="p-4">All sides padding</div>
<div class="px-4">Horizontal padding</div>
<div class="py-4">Vertical padding</div>
<div class="pt-4">Top padding</div>
<div class="pr-4">Right padding</div>
<div class="pb-4">Bottom padding</div>
<div class="pl-4">Left padding</div>

Padding Examples

p-4
px-4
py-4
pt-6
pr-4
pb-8
pl-2

Space Between Elements

Space between utilities control the spacing between child elements. The space-x utilities add horizontal space, while space-y utilities add vertical space.

Space Between X

Add horizontal spacing between elements with space-x-{size} utilities. 

<div class="flex space-x-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Space Between X Example

01
02
03

Space Between Y

Add vertical spacing between elements with space-y-{size} utilities. 

<div class="flex flex-col space-y-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Space Between Y Example

01
02
03

Practical Use Cases

Form Layout

This form uses space-y-4 to create consistent vertical spacing between form elements.

Card Grid

Card 1

Using gap utilities

Card 2

Using gap utilities

Card 3

Using gap utilities

Card 4

Using gap utilities

This card grid uses gap-4 to create consistent spacing between grid items.

Best Practices

  • Use containers to ensure consistent content width across pages
  • Be consistent with spacing values throughout your designs to maintain visual harmony
  • Use margin for spacing between elements, and padding for internal spacing
  • Consider using space-x and space-y for consistent spacing between child elements
  • Use responsive variants to adjust spacing for different screen sizes
  • Use arbitrary values sparingly, preferring the default spacing scale when possible

Summary & Key Takeaways

What We've Learned

  • Container utilities help maintain consistent width across different screen sizes
  • Margin utilities control spacing outside elements, creating separation between components
  • Padding utilities provide internal spacing to improve readability and visual appeal
  • Space-between utilities create consistent gaps between elements without manual margin calculations

Next Steps

  • Combine spacing utilities with Flexbox or Grid for more advanced layouts
  • Create a spacing system with consistent values throughout your project
  • Experiment with responsive variants to create adaptive layouts
  • Check out the official Tailwind CSS documentation for more details
Back to Main Documentation