Add responsive support to an existing component. Use when asked to make a component responsive, add mobile/tablet support, or adapt layout for different screen sizes.
Add full responsive support to an existing large-screen component for all screen sizes.
md: - Medium screenslg: - Large screensxl: - Extra large screens2xl: - Ultra wide screensmdlgxlxl and above| Device Type |
|---|
| Tailwind Screen |
|---|
| Width (px) |
|---|
| Frame Size |
|---|
| Description |
|---|
| Desktop (Landing / Dashboard) | 2xl | >=1536 | 1920x1200 | Graphic-heavy layout |
| Desktop (Default Project) | 2xl | >=1536 | 1600x1000 | Recommended default |
| Desktop (Simple App) | 2xl | >=1536 | 1440x910 | Clean app layout |
| Laptop | xl | >=1280 | 1280x810 | Common laptop screen |
| Tablet (Horizontal) | lg | >=1024 | 1024x768 | Horizontal tablet |
| Tablet (Vertical) | md | >=768 | 768x1024 | Vertical tablet |
| Mobile (Portrait) | sm | >=640 | 375x812 | Standard mobile |
useViewSize.ts hook to detect screen width and apply conditional styles or layouts.Refer to the provided Figma links for visual layouts, spacing, and component structure.