Tailwind Container Query Ruler
Drag the handle to resize the container and see how container queries respond
Full Width Responsive Hero
Container Queries Demo
Responsive DesignWithout Media Queries
Active at:@3xs@2xs@xs@sm@md@lg@xl@2xl@3xl@4xl@5xl@6xl@7xl
Resizable Container Demo
Container Width:800px@3xl
@3xs
@2xs
@xs
@sm
@md
@lg
@xl
@2xl
@3xl
128
256
384
512
640
768
Container Queries Demo
Responsive DesignWithout Media Queries
Active at:@3xs@2xs@xs@sm@md@lg@xl@2xl@3xl@4xl@5xl@6xl@7xl
3xs
2xs
xs
sm
md
lg
xl
2xl
3xl
4xl
5xl
6xl
7xl
Simple Card Demo
Container Width:600px@xl
@3xs
@2xs
@xs
@sm
@md
@lg
@xl
128
256
384
512
Card 1
This card responds to container queries
Card 2
This card responds to container queries
Card 3
This card responds to container queries
Card 4
This card responds to container queries
Visible at breakpoint:
@3xs (64px+)@2xs (112px+)@xs (160px+)@sm (320px+)@md (448px+)@lg (512px+)@xl (576px+)@2xl (672px+)@3xl (768px+)@4xl (896px+)@5xl (1024px+)@6xl (1152px+)@7xl (1280px+)
3xs
2xs
xs
sm
md
lg
xl
2xl
3xl
4xl
5xl
6xl
7xl