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)

You're viewing **OG Image v5** documentation. For the latest,

.

OG Image

-
-
-
-
-
-
-
-
-
-

Search…```k`` /`

v5

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

### Getting Started

-
-
-
-

### Core Concepts

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

### Integrations

-
-

Core Concepts

# Styling

[Copy for LLMs](https://nuxtseo.com/docs/og-image/v5/guides/styling.md)

Due to Nuxt OG Image using Satori to render OG Images, there a number of limitations in how you can style your templates.

## [Layout Constraints](#layout-constraints)

- Satori does not support `inline`, `block` or `grid` layouts.

Everything is a flexbox with a `flex-direction` of `column`. You should design your templates with this in mind.

## [UnoCSS / Tailwind Classes](#unocss-tailwind-classes)

Out-of-the-box and without any extra configuration, you can use UnoCSS and Tailwind classes in your templates.

```
<!-- just works -->
<div class="bg-red-500 text-white p-4">
  <h1 class="text-[60px]">Hello World</h1>
</div>
```

Your theme configuration will be automatically set when you're using the `@nuxtjs/tailwind` or `@unocss/nuxt` modules.

```
<template>
<div class="full centered bg-primary-500/50 text-base">
  <h1 class="text-mega-big">
    Custom Theme Classes!
  </h1>
</div>
</template>
```

## [Inline Styles](#inline-styles)

There are certain cases where the utility classes won't be enough to style your templates.

In these cases, you can use inline styles to style your templates.

```
<template>
<div :style="background-image: url(https://example.com/bg.png)">
  <h1 class="text-mega-big" style="color: red;">
    Custom Theme Classes!
  </h1>
</div>
</template>
```

## [`<style>` tag support](#style-tag-support)

You can use `<style>` tags within your templates, however, it requires the `inline-css` dependency, which has limited compatibility with WebWorker environments.

See the

 guide for more information.

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

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

Did this page help you?

On this page

- [Layout Constraints](#layout-constraints)
- [UnoCSS / Tailwind Classes](#unocss-tailwind-classes)
- [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)