Spacing & Layout

Every gap, padding and margin in VitNode comes from one scale. Pick a step, never a pixel, and layouts line up on their own.

Spacing scaleCopy Anchor Link

One unit is 0.25rem (4px), so p-4 is 16px and gap-6 is 24px. Stay on the scale: p-4, never p-[16px].

Gap, not space-*Copy Anchor Link

Hit Add tags until the rows wrap. space-x-* puts margins on children, so wrapped rows touch and hidden items leave holes. gap-* belongs to the parent and just works.

<ul className="flex flex-wrap gap-2">{tags}</ul>

Never mix margin or padding with gap on the same element. One job, one tool.

Group by proximityCopy Anchor Link

Distance is meaning. Things that belong together sit closer than things that don't: gap-1 for a title and its hint, gap-2 for a label and its input, gap-8 between sections.

Cards bring their own paddingCopy Anchor Link

Card sets --card-spacing once (24px, or 16px with size="sm") and every part reuses it. Don't pad the card again, use CardHeader and CardContent.

Responsive layoutCopy Anchor Link

Drag the handle. Container queries (@container + @md:) react to the box a component lives in, so the same widget works in a sidebar and a full page.

Page layouts use viewport breakpoints, mobile first: write the phone layout, then add sm:, md:, lg: on top.

useIsMobile() flips at md (768px), so CSS and JS agree on what a phone is.

Logical properties for RTLCopy Anchor Link

Switch to pl- / ml- and watch the Arabic row break. ps-, pe-, ms-, me-, start- and border-s follow the reading direction, so one class list serves both.

<div className="flex items-center gap-3 border-s-4 ps-3">
  <ChevronRightIcon className="ms-auto rtl:rotate-180" />
</div>

Layout rulesCopy Anchor Link

• flex and grid with gap-* for layout. No floats, and absolute positioning only for real overlays.
• Semantic alignment: items-center, justify-between, self-end.
• Mobile first: the base class is the phone, prefixes add space.
• max-w-prose (65ch) on long paragraphs, so lines stay easy to follow on a wide monitor.

RelatedCopy Anchor Link