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.

Tailwind Classes

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

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

Classes are extracted from your OG components at build time and compiled with Tailwind's CSS engine.

Theme Customizations

Custom theme values from your CSS are automatically resolved:

@import "tailwindcss";

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

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

Tailwind v4 Configuration

If using Tailwind v4 with the Vite plugin (not @nuxtjs/tailwindcss), point the module to your CSS:

export default defineNuxtConfig({
  ogImage: {
    tailwindCss: '~/assets/css/main.css'
  }
})

If using @nuxtjs/tailwindcss, the module auto-detects your setup - no configuration needed.

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

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

See the Renderers guide for more information.