---
title: "Styling · Nuxt OG Image · Nuxt SEO"
canonical_url: "https://nuxtseo.com/docs/og-image/guides/styling"
last_updated: "2026-08-17T17:20:47.513Z"
meta:
  description: "How to style your OG Images."
  "og:description": "How to style your OG Images."
  "og:title": "Styling · Nuxt OG Image · Nuxt SEO"
---

Nuxt SEO on GitHub

**OG Image v6** is here. Looking for an older version? [~~View v5 docs ~~](https://nuxtseo.com/docs/og-image/v5/getting-started/introduction).

](https://nuxtseo.com/docs/og-image/getting-started/introduction)

](https://nuxtseo.com/docs/og-image/api/define-og-image)

](https://nuxtseo.com/docs/og-image/releases/v6)

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)

**Core Concepts**

# **Styling**

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

| **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:** 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:** 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

Nuxt OG Image performs "automagic" CSS transformations during the build process to ensure cross-renderer compatibility.

### 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

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

Use Tailwind/UnoCSS classes directly in your templates without extra configuration.

```html
<div class="bg-blue-500 text-white p-12 flex flex-col items-center justify-center">
  <h1 class="text-6xl font-bold shadow-xl">Hello World</h1>
</div>
```

The module extracts classes from your OG components at build time and compiles them using your project's CSS engine.

### Theme Customizations

The module automatically resolves custom theme values, including Tailwind v4 variables defined in your `**@theme**` block:

assets/css/main.css

```css
@import "tailwindcss";

@theme {
  --color-brand: #ff6600;
}
```

```html
<template>
  <div class="bg-brand text-white">
    Custom Theme Classes!
  </div>
</template>
```

### 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.

## Theme Switching (`**data-theme**`)

By default, OG images render with dark-mode semantic tokens (e.g. Nuxt UI's `**bg-inverted**`, `**text-default**`). To opt into theme-aware token resolution, set `**data-theme**` on the **root element** of your component. Tailwind v4 only.

### Static `**data-theme**`

Hard-code a theme on the root element:

components/OgImage/MyImage.satori.vue

```vue
<template>
  <div data-theme="light" class="w-full h-full bg-default text-default p-10">
    <div class="bg-inverted text-inverted p-6 rounded-lg">
      Light mode tokens
    </div>
  </div>
</template>
```

Semantic tokens like `**bg-inverted**`, `**text-muted**`, `**border-accented**` resolve against the chosen theme: `**data-theme="light"**` produces light-mode values, `**data-theme="dark"**` produces dark-mode values.

### Dynamic `**data-theme**` (per-image color mode)

Bind `**:data-theme**` to a prop to swap themes per OG image:

components/OgImage/MyImage.satori.vue

```vue
<script lang="ts" setup>
defineProps<{ colorMode?: 'light' | 'dark' }>()
</script>

<template>
  <div :data-theme="colorMode" class="w-full h-full bg-default text-default p-10">
    <div class="bg-inverted text-inverted p-6 rounded-lg">
      hello {{ colorMode }}
    </div>
  </div>
</template>
```

pages/light.vue

```vue
<script setup lang="ts">
defineOgImage('MyImage', { colorMode: 'light' })
</script>
```

pages/dark.vue

```vue
<script setup lang="ts">
defineOgImage('MyImage', { colorMode: 'dark' })
</script>
```

When the build detects a `**:data-theme**` binding on the root element, it resolves classes for both themes at build time and emits paired `**bg-[#...] dark:bg-[#...]**` arbitrary classes. The renderer then picks the correct value based on the `**colorMode**` prop you pass to `**defineOgImage**`.

The dynamic binding only works on the **root element** of the OG component. Nested elements inherit the resolved theme from the build pass.

Templates that don't set `**data-theme**` keep the existing dark-mode default; this feature is opt-in and non-breaking.

## Inline Styles

Use the `**:style**` binding for dynamic values that change based on props.

```html
<template>
  <div :style="{ backgroundColor: themeColor }" class="w-full h-full flex items-center justify-center">
    <h1 style="color: white; font-size: 80px;">
      {{ title }}
    </h1>
  </div>
</template>
```

## `**<style>**` tag support

You can use scoped or global `**<style>**` tags within your components. The module processes and applies these directly to the rendered image.

Standard CSS selectors work across all renderers, though Satori has limited support for advanced selectors like `**:nth-child**` or complex combinators.

**Was this page helpful?**

### **Related **

[**Nuxt Color Mode**](https://nuxtseo.com/docs/og-image/integrations/color-mode)

[**Icons and Images**](https://nuxtseo.com/docs/og-image/guides/icons-and-images)

[**Satori Renderer**](https://nuxtseo.com/docs/og-image/renderers/satori)

[**Icons and Images** How to use icons and images in your templates.](https://nuxtseo.com/docs/og-image/guides/icons-and-images) [**JPEGs** Learn how to generate JPEG images instead of PNG for Nuxt OG Image.](https://nuxtseo.com/docs/og-image/guides/jpegs)