All spacing is based on a 4px base unit for consistency and scalability.
1= 0.25rem (4px)2= 0.5rem (8px)3= 0.75rem (12px)4= 1rem (16px)6= 1.5rem (24px)8= 2rem (32px)12= 3rem (48px)16= 4rem (64px)24= 6rem (96px)
Responsive container padding and max-widths for different breakpoints:
- Default: 1rem padding
- sm (640px): 2rem padding
- lg (1024px): 4rem padding
- xl (1280px): 5rem padding
- Max-width: 80rem (1280px)
Use the .grid-12 utility class for a 12-column responsive grid:
<div className="grid-12">
<div className="col-span-12 md:col-span-6 lg:col-span-4">Item</div>
</div>Use the .grid-auto utility class for auto-fitting columns:
<div className="grid-auto">
<div>Item 1</div>
<div>Item 2</div>
</div>Use .section-spacing for consistent vertical and horizontal spacing between major sections:
- Mobile:
py-12 px-4(48px vertical, 16px horizontal) - Tablet:
md:py-16 md:px-6(64px vertical, 24px horizontal) - Desktop:
lg:py-20 lg:px-8(80px vertical, 32px horizontal)
Use .component-spacing for internal component padding:
- Mobile:
p-4(16px) - Tablet:
md:p-6(24px) - Desktop:
lg:p-8(32px)
Use .layout-container to center and constrain content:
<div className="layout-container">
{/* Content */}
</div>- Margins: Use multiples of 4px (1, 2, 3, 4, 6, 8, 12, 16, 24)
- Padding: Use multiples of 4px for consistency
- Gaps: Use consistent gap values in grids and flexbox layouts
- Breakpoints: Follow Tailwind's default breakpoints (sm: 640px, md: 768px, lg: 1024px, xl: 1280px)
- Always use spacing tokens from the scale
- Maintain consistent spacing between related elements
- Use responsive spacing utilities for mobile-first design
- Avoid hardcoded pixel values; use Tailwind classes
- Test layouts at all breakpoints