Styling · Nuxt OG Image · Nuxt SEO [NuxtSEO](https://nuxtseo.com/ "Home") - [Modules](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction) - [Tools](https://nuxtseo.com/tools) - [Pro](https://nuxtseo.com/pro) - [Learn SEO](https://nuxtseo.com/learn-seo/nuxt) [Releases](https://nuxtseo.com/releases) [1.4K](https://github.com/harlan-zw/nuxt-seo) [Nuxt SEO on GitHub](https://github.com/harlan-zw/nuxt-seo) **OG Image v6** is here! Looking for an older version? [View v5 docs](https://nuxtseo.com/docs/og-image/v5/getting-started/introduction). [User Guides](https://nuxtseo.com/docs/og-image/getting-started/introduction) [API](https://nuxtseo.com/docs/og-image/api/define-og-image) [Releases](https://nuxtseo.com/docs/og-image/releases/v6) OG Image - [Switch to OG Image](https://nuxtseo.com/docs/og-image/getting-started/introduction) - [Switch to Nuxt SEO](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction) - [Switch to Robots](https://nuxtseo.com/docs/robots/getting-started/introduction) - [Switch to Sitemap](https://nuxtseo.com/docs/sitemap/getting-started/introduction) - [Switch to Schema.org](https://nuxtseo.com/docs/schema-org/getting-started/introduction) - [Switch to Link Checker](https://nuxtseo.com/docs/link-checker/getting-started/introduction) - [Switch to SEO Utils](https://nuxtseo.com/docs/seo-utils/getting-started/introduction) - [Switch to Site Config](https://nuxtseo.com/docs/site-config/getting-started/introduction) - [Switch to Skew Protection](https://nuxtseo.com/docs/skew-protection/getting-started/introduction) - [Switch to AI Ready](https://nuxtseo.com/docs/ai-ready/getting-started/introduction) Search…```k`` /` v6 (latest) - Playgrounds - [Discord Support](https://discord.com/invite/275MBUBvgP) ### Getting Started - [Introduction](https://nuxtseo.com/docs/og-image/getting-started/introduction) - [Installation](https://nuxtseo.com/docs/og-image/getting-started/installation) - [Troubleshooting](https://nuxtseo.com/docs/og-image/getting-started/troubleshooting) - [Tutorial: Your first OG Image](https://nuxtseo.com/docs/og-image/getting-started/getting-familiar-with-nuxt-og-image) ### Core Concepts - [Zero Runtime](https://nuxtseo.com/docs/og-image/guides/zero-runtime) - [WhatsApp & Multiple Images](https://nuxtseo.com/docs/og-image/guides/whatsapp) - [Performance](https://nuxtseo.com/docs/og-image/guides/performance) - [CLI](https://nuxtseo.com/docs/og-image/guides/cli) - [Security](https://nuxtseo.com/docs/og-image/guides/security) - [Cloudflare](https://nuxtseo.com/docs/og-image/guides/cloudflare) - [Route Rules](https://nuxtseo.com/docs/og-image/guides/route-rules) - [Caching Images](https://nuxtseo.com/docs/og-image/guides/cache) - [JPEGs](https://nuxtseo.com/docs/og-image/guides/jpegs) - [Custom Fonts](https://nuxtseo.com/docs/og-image/guides/custom-fonts) - [Non-English Locales](https://nuxtseo.com/docs/og-image/guides/non-english-locales) - [Emojis](https://nuxtseo.com/docs/og-image/guides/emojis) - [Icons and Images](https://nuxtseo.com/docs/og-image/guides/icons-and-images) - [Styling](https://nuxtseo.com/docs/og-image/guides/styling) - [Community Templates](https://nuxtseo.com/docs/og-image/guides/community-templates) - [Error pages](https://nuxtseo.com/docs/og-image/guides/error-pages) ### Overview - [Overview](https://nuxtseo.com/docs/og-image/renderers) - [Takumi Renderer](https://nuxtseo.com/docs/og-image/renderers/takumi) - [Satori Renderer](https://nuxtseo.com/docs/og-image/renderers/satori) - [Browser Renderer](https://nuxtseo.com/docs/og-image/renderers/browser) ### Integrations - [Nuxt Content](https://nuxtseo.com/docs/og-image/integrations/content) - [Nuxt Color Mode](https://nuxtseo.com/docs/og-image/integrations/color-mode) - [Nuxt I18n](https://nuxtseo.com/docs/og-image/integrations/i18n) Core Concepts # Styling [Copy for LLMs](https://nuxtseo.com/docs/og-image/guides/styling.md) Nuxt OG Image supports modern CSS via Tailwind v4, [UnoCSS](https://unocss.dev), and standard CSS. Your level of CSS support depends on the chosen renderer. ## [Layout Support](#layout-support) | Feature | [Takumi](https://nuxtseo.com/docs/og-image/renderers/takumi) | [Satori](https://nuxtseo.com/docs/og-image/renderers/satori) | [Browser](https://nuxtseo.com/docs/og-image/renderers/browser) | | --- | --- | --- | --- | | **Flexbox** | ✅ | ✅ | ✅ | | **CSS Grid** | ✅ | ❌ | ✅ | | **Block/Inline** | ✅ | ❌ | ✅ | | **Position Absolute** | ✅ | ✅ | ✅ | ### [Satori Constraints](#satori-constraints) The [Satori](https://nuxtseo.com/docs/og-image/renderers/satori) renderer treats everything as a flexbox with `flex-direction: column` by default. It lacks support for `display: grid`, `display: block`, and `display: inline`. ### [Takumi & Browser](#takumi-browser) The recommended [Takumi](https://nuxtseo.com/docs/og-image/renderers/takumi) and [Browser](https://nuxtseo.com/docs/og-image/renderers/browser) renderers offer much broader CSS support, including CSS Grid and standard block/inline layouts. ## [Build-time Transformations](#build-time-transformations) Nuxt OG Image performs "automagic" CSS transformations during the build process to ensure cross-renderer compatibility. ### [CSS Downleveling & Polyfills](#css-downleveling-polyfills) The module uses [Lightning CSS](https://lightningcss.dev/) to process styles for simpler renderers like Satori: - **Color Downleveling:** Automatically converts modern colors (`oklch()`, `lab()`, `p3`) to standard hex or `rgba()`. - **Logical Properties:** Expands properties like `padding-inline` and `margin-block` to physical counterparts. - **Individual Transforms:** Merges `translate`, `rotate`, and `scale` into a single `transform` shorthand. - **Color Mix:** Evaluates and replaces `color-mix()` functions with static color values. - **Calc Evaluation:** Resolves simple `calc()` expressions at build time. ### [Unsupported Classes](#unsupported-classes) The build process filters out utility classes that static renderers don't support, such as animations, transitions, and z-index, to prevent rendering errors. ## [Tailwind CSS & UnoCSS](#tailwind-css-unocss) Use Tailwind/UnoCSS classes directly in your templates without extra configuration. ```

Hello World

``` The module extracts classes from your OG components at build time and compiles them using your project's CSS engine. ### [Theme Customizations](#theme-customizations) The module automatically resolves custom theme values, including Tailwind v4 variables defined in your `@theme` block: assets/css/main.css ``` @import "tailwindcss"; @theme { --color-brand: #ff6600; } ``` ``` ``` ### [Auto-detection](#auto-detection) The module automatically detects your CSS framework: - **Tailwind v4:** Active if you install `tailwindcss` and use `@import "tailwindcss"` in your CSS. - **UnoCSS:** Active if you enable `@unocss/nuxt`. - **Nuxt UI v3:** Automatically imports colors and theme variables. ## [Inline Styles](#inline-styles) Use the `:style` binding for dynamic values that change based on props. ``` ``` ## [`