Satori CSS limits explained: what breaks your Vercel OG images and why

Satori, the engine powering Vercel's @vercel/og and next/og libraries, converts HTML and CSS into SVG but supports only a limited subset of CSS, which is why images that look correct in a browser can render incorrectly or break. Unlike a browser, Satori uses the Yoga flexbox engine from React Native, meaning the only supported display values are flex and none — there is no block, inline-block, or grid. Developers must rebuild grid layouts as nested flex containers, avoid viewport units and z-index, and order markup deliberately since SVG renders in document order. Features like position: fixed, 3D transforms, pseudo-elements, media queries, and class-based stylesheets are all unsupported, requiring decorative elements to be written as explicit child nodes. Using Tailwind via the tw prop does not expand these boundaries, as unsupported CSS properties remain unsupported regardless of how they are authored.