Styling · Nuxt OG Image · Nuxt SEO

-
-
-
-

[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?

.

OG Image

-
-
-
-
-
-
-
-
-
-

Search…```k`` /`

v6 (latest)

- Playgrounds
- [Discord Support](https://discord.com/invite/275MBUBvgP)

### Getting Started

-
-
-
-

### Core Concepts

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-

### Overview

-
-
-
-

### Integrations

-
-
-

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 |  |  | |
| --- | --- | --- | --- |
| **Flexbox** | ✅ | ✅ | ✅ |
| **CSS Grid** | ✅ | ❌ | ✅ |
| **Block/Inline** | ✅ | ❌ | ✅ |
| **Position Absolute** | ✅ | ✅ | ✅ |

### [Satori Constraints](#satori-constraints)

The

 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

 and

 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.

```
<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](#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;
}
```

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

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

```
<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](#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.

[Edit this page](https://github.com/nuxt-modules/og-image/edit/main/docs/content/3.guides/7.styling.md)

[Markdown For LLMs](https://nuxtseo.com/docs/og-image/guides/styling.md)

Did this page help you?

On this page

- [Layout Support](#layout-support)
- [Build-time Transformations](#build-time-transformations)
- [Tailwind CSS & UnoCSS](#tailwind-css-unocss)
- [Inline Styles](#inline-styles)
- [<style> tag support](#style-tag-support)

[GitHub](https://github.com/harlan-zw/nuxt-seo) [ Discord](https://discord.com/invite/275MBUBvgP)

###

-
-

Modules

-
-
-
-
-
-
-
-
-

###

-
-
-

###

Nuxt

-
-
-
-
-

Vue

-
-
-
-
-
-
-
-

###

-
-
-
-
-
-
-
-
-
-

Copyright © 2023-2026 Harlan Wilton - [MIT License](https://github.com/harlan-zw/nuxt-seo/blob/main/license) · [mdream](https://mdream.dev)