Tailwind's aspect-ratio utilities are 1:1 mappings of the CSS property they compile to.
aspect-video →
aspect-ratio: 16 / 9.
aspect-square →
aspect-ratio: 1 / 1.
aspect-[16/9] → arbitrary-value syntax →
aspect-ratio: 16 / 9. All three ship identical CSS to what this collection demos. Tailwind's
Aspect Ratio docs even reference the exact same Baseline support cutoff (Sep 2021) that this collection targets. The productivity trade-off: Tailwind gives you
class='aspect-video' instead of
style='aspect-ratio: 16/9' — 12 chars vs 26. In a JSX/Vue/Svelte template that authors 200+ elements per page, the class syntax reads cleaner AND you get Tailwind's JIT purge so unused utilities never ship. In a plain HTML/CSS project without Tailwind: use the direct
aspect-ratio declaration in a scoped stylesheet — you avoid Tailwind's runtime (~15-40KB compressed depending on JIT settings), and the CSS variable pattern in every one of this collection's demos (
--ar: 16/9) lets you theme the ratio via CSS custom properties without shipping the Tailwind runtime.
For Radix UI users:
@radix-ui/react-aspect-ratio is a 1.2KB gzipped React wrapper that renders a
<div> with the aspect-ratio property applied. It exists purely for the Radix API consistency — the underlying CSS is identical to shipping the property directly. Drop the library if you're not deep in the Radix ecosystem.
Same story for @mui/material Box (Material UI ~85KB total bundle if you tree-shake),
Chakra UI AspectRatio (Chakra's Emotion runtime ~50KB),
shadcn/ui aspect-ratio (peer-deps on Radix). None of them add functionality — the CSS property does the work; the wrapper adds a naming convention. This collection's approach: ship the CSS property directly in a scoped block, get the same result at 0KB runtime cost.
