OGX supports a subset of Tailwind CSS utilities optimized for image generation. The parser uses O(1) static class lookups and multi-level caching for high performance.

[!IMPORTANT] OGX supports the dark: prefix for conditional dark mode styles. Pass colorScheme: 'dark' to enable.

Supported Categories

Layout

Flexbox, position, display

Spacing

Padding, margin, gap, sizing

Typography

Font size, weight, alignment

Colors

Background, text, border colors

Borders

Width, radius, color

Effects

Shadow, opacity, overflow

Patterns

Grid, dots, grain textures

Quick Reference

Most Used Classes

// Layout
'flex flex-col items-center justify-center gap-4'
'w-full h-full p-16'
'absolute inset-0 relative'

// Typography
'text-6xl font-bold text-white'
'text-xl text-zinc-400'

// Colors & Backgrounds
'bg-zinc-950 bg-gradient-to-br from-indigo-500 to-purple-600'
'text-white/80 bg-black/50'

// Borders
'border border-zinc-800 rounded-2xl'

// Effects
'shadow-xl opacity-50'

Arbitrary Values

Use brackets for custom values:

'p-[32px]'           // Custom padding
'text-[42px]'        // Custom font size
'bg-[#1a1a1a]'       // Hex color
'w-[300px]'          // Custom width
'bg-[oklch(65%_0.25_260)]' // OKLCH color

Dark Mode

Use the dark: prefix for dark mode styles:

'bg-white dark:bg-zinc-950'
'text-zinc-900 dark:text-white'

Enable by passing colorScheme: 'dark' to render functions.

Limitations

Due to Satori's constraints, some Tailwind features are not supported:

CSS Grid (grid, grid-cols-*)
Backdrop filters (backdrop-blur)
Transforms (rotate, scale, translate)
Animations (animate-*)
Pseudo-classes (:hover, :focus)

Use flexbox-based layouts with flex-wrap for grid-like designs.

Tailwind Support