Responsive design
Build layouts that read well from a 375px phone up to a 4K monitor. Aidash Components inherits Tailwind's mobile-first breakpoints — nothing new to learn.
sm:, md:,lg:) to enlarge it. It reads more naturally and produces less overall CSS.Breakpoints
Five standard breakpoints. All are min-width — i.e. the class applies at that width and larger.
| Prefix | min-width | Typical devices |
|---|---|---|
| sm: | 640px | Large phones · Small tablets |
| md: | 768px | Tablets · Landscape phones |
| lg: | 1024px | Laptops · Small desktops |
| xl: | 1280px | Desktops |
| 2xl: | 1536px | Large desktops |
Container queries
Tailwind v4 supports @container out of the box. Great for components that need to respond to their parent, not the viewport.
<div className="@container">
<div className="@md:grid @md:grid-cols-2 gap-4">
<img src="/cover.jpg" alt="" />
<div>
<h3>Title</h3>
<p>Body...</p>
</div>
</div>
</div>Fluid typography
Use clamp() to interpolate font-size smoothly between two viewport widths. Avoid step-y resizing at breakpoints.
.hero-title {
font-size: clamp(1.875rem, 1.5rem + 1.5vw, 3rem);
line-height: 1.1;
}Layout patterns
Two grid patterns that cover 90% of what you'll build.
Auto-fit card grid
A grid that reflows automatically — no breakpoint prefixes needed. Cards shrink from three columns down to one as the viewport narrows.
<div className="grid grid-cols-[repeat(auto-fit,minmax(220px,1fr))] gap-4">
{items.map(item => <Card key={item.id} {...item} />)}
</div>Sidebar + main
Sidebar hides below md, main content expands. A single grid keeps sticky positioning simple.
<div className="md:grid md:grid-cols-[240px_1fr] md:gap-6">
<aside className="hidden md:block">
<Sidebar />
</aside>
<main>{children}</main>
</div>Testing responsive layouts
Ways to catch broken layouts before your users do.