---
title: "Styling · Nuxt OG Image · Nuxt SEO"
canonical_url: "https://nuxtseo.com/docs/og-image/v5/guides/styling"
last_updated: "2026-08-16T10:00:31.931Z"
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

You're viewing **OG Image v5** documentation. For the latest, [~~switch to v6~~](https://nuxtseo.com/docs/og-image/getting-started/introduction).

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

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

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

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

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~~**](https://nuxtseo.com/docs/og-image/guides/compatibility) guide for more information.

**Was this page helpful?**

[**Icons and Images** How to use icons and images in your templates.](https://nuxtseo.com/docs/og-image/v5/guides/icons-and-images) [**Community Templates** Community templates that are included with the module, including NuxtSeo.](https://nuxtseo.com/docs/og-image/v5/guides/community-templates)