Tailwind CSS 3.4

Layout

Responsive containers, grid layouts, dividers, and spacers for page structure

Containers

Responsive containers with different max-width sizes:

Small Container
Medium Container
Large Container
Extra Large Container
2XL Container

Grid

Responsive grid layouts with configurable columns and gaps:

3 Columns
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
4 Columns
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
Cell 7
Cell 8
Responsive (1 col mobile, 2 col tablet, 4 col desktop)
Responsive 1
Responsive 2
Responsive 3
Responsive 4

Dividers

Visual separators for content with optional labels:

Horizontal

Content above the divider

Content below the divider

With Label
OR
Section Break
Vertical
Left
Middle
Right

Spacers

Flexible spacing components for consistent layout gaps:

Vertical Sizes
Block
Block
Block
Block
Block
Block
2XL spacer above
Block