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.

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

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 Compatibility guide for more information.