Pixel utilities

The pixel aesthetic comes from a few Tailwind utilities layered onto components. They’re defined in the DottoUI core stylesheet and work anywhere Tailwind v4 runs.

pixel-corner

pixel-bordered

pixel-shadow

The utilities

Class	What it does
pixel-corner	Stepped 8px/4px notched corners via clip-path
pixel-corner-lg	Larger 12px/6px step for big cards & badges
pixel-corner-1	Single-step 4px notch per corner (used on badges)
pixel-bordered	Crisp 2px navy frame that follows the notched corners
pixel-bordered-1	Bordered frame matching the single-step pixel-corner-1 notch
pixel-shadow / pixel-shadow-sm	Hard offset drop-shadow that follows the clipped shape
pixel-shadow-none	Removes the shadow (used on :active)
pixel-depth / pixel-depth-fill	Inset bevel for a chiselled 3D-pixel look
pixelated	image-rendering: pixelated for dropped-in pixel art
font-display	Switches to Silkscreen

Tips

• Use pixel-bordered instead of pixel-corner + a bg-* fill — the pseudo elements define the shape and the fill (--pf-fill, defaults to the card color).
• pixel-shadow composes with pixel-bordered (filter vs. pseudo layers), so you can add both.

<div className="pixel-bordered pixel-shadow [--pf-fill:var(--secondary)] p-5">
  a framed, shadowed panel
</div>