Styling

Inline style, the tw prop, or external stylesheets. They compose; you'll usually pick one as the primary and reach for the others when it's convenient.

Inline style

The style prop accepts the same shape as React's. CSS property names are camelCased, values are strings or numbers. Type-checked against csstype, so the editor catches typos.

import { render } from "takumi-js";
import type { CSSProperties } from "react";

const card: CSSProperties = {
  display: "flex",
  flexDirection: "column",
  padding: 48,
  background: "linear-gradient(135deg, #6366f1 0%, #ec4899 100%)",
  color: "white",
  fontSize: 48,
  fontWeight: 700,
};

await render(<div style={card}>Hello Takumi</div>, { width: 1200, height: 630 });

Reach for inline style when the value is dynamic (a brand color from the database, a chart bar height), when you want zero build steps, or when a one-shot OG image doesn't justify a CSS pipeline.

Tailwind via tw prop

tw is the fastest path for users coming from next/og. Classes are parsed at render time by Takumi's built-in mapping — no Tailwind compiler, no PostCSS, no build config.

<div tw="flex items-center justify-center w-full h-full bg-blue-500">
  <h1 tw="text-white text-6xl font-bold">Hello Tailwind</h1>
</div>

What's compiled: the core utilities (layout, spacing, sizing, color, typography, flexbox, grid), arbitrary values (text-[#1a6ef5], w-[640px]), and animation presets (animate-spin, animate-pulse).

Limitations: no custom theme config (use arbitrary values), no plugins, no @apply. The full mapping lives at takumi/src/layout/style/tw/map.rs. When you outgrow it, switch to an external stylesheet — the syntax is the same.

tw is a plain prop, so dynamic class composition works:

import clsx from "clsx";

<div tw={clsx("p-4 rounded", isError ? "bg-red-100" : "bg-green-100")}>{children}</div>;

External stylesheets

Pass compiled CSS to render via stylesheets. Works with anything that emits CSS — Tailwind v4, UnoCSS, Panda, vanilla .css files, a string you wrote by hand.

import { render } from "takumi-js";
import { compileTailwindStylesheet } from "./tailwind-compile";

const css = await compileTailwindStylesheet(currentDir);

await render(<Card />, {
  width: 1200,
  height: 630,
  stylesheets: [css],
});

The Vite path is even smaller — ?inline gives you the compiled stylesheet as a string:

import stylesheet from "~/styles/global.css?inline";

return new ImageResponse(<Card />, {
  width: 1200,
  height: 630,
  stylesheets: [stylesheet],
});

The css-library-integration example shows the same JSX rendered through both Tailwind and UnoCSS pipelines — useful as a starting point for either.

External stylesheets get you the full framework: theme tokens, plugins, @apply, custom utilities, complex selectors. Cost is a build step and an extra dependency.

When to use which