---
title: "Styling"
description: "How to style your OG Images."
canonical_url: "https://nuxtseo.com/docs/og-image/v5/guides/styling"
last_updated: "2026-05-06T18:46:36.001Z"
---

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

- 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

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

```html
<!-- 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.

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

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

```html
<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

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

See the [Compatibility](/docs/og-image/guides/compatibility) guide for more information.