Styling

Four ways to put CSS on a node:

• style prop: inline CSSProperties on one node. Overrides the tag default.
• tw prop: Tailwind classes on one node.
• <style> tags: CSS that travels inside the JSX.
• stylesheets option: full stylesheets matched against className and id.

Stylesheets

Pass real CSS through stylesheets and match it by className or id.

import { render } from "takumi-js";

const image = await render(<div className="card">Hello</div>, {
  width: 1200,
  height: 630,
  stylesheets: [`.card { display: flex; padding: 48px; background: #0f172a; color: white; }`],
});

The engine handles:

A <style> tag feeds the same engine and gets extracted from the JSX automatically.

<div className="card">
  <style>{`.card { display: flex; padding: 48px; }`}</style>
  Hello
</div>

Tailwind

Bring your stylesheet

Compile Tailwind with your bundler, then pass the CSS through stylesheets. On Vite, import it with the ?inline query.

import { ImageResponse } from "takumi-js/response";
import stylesheet from "~/styles/global.css?inline";

export function GET() {
  return new ImageResponse(
    <div className="bg-background text-foreground flex justify-center items-center w-full h-full text-4xl">
      Hello Tailwind!
    </div>,
    {
      width: 1200,
      height: 630,
      stylesheets: [stylesheet],
    },
  );
}

import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [tailwindcss()],
});

Native parser

The tw prop runs a built-in parser with no build step. It won't cover every Tailwind feature.

• Arbitrary values work.
• See the parser mapping for every supported class.

Utilities lose to any rule from stylesheets, the way @layer utilities loses to unlayered CSS. Mark the utility with ! to win instead.

<div tw="bg-blue-500 p-4 rounded-lg">
  <h1 tw="text-white text-2xl font-bold">Hello Tailwind!</h1>
</div>

Theme tokens

A utility reads a CSS custom property, the way Tailwind compiles it. bg-red-500 resolves var(--color-red-500) and p-4 resolves calc(var(--spacing) * 4), with the built-in scale behind them. Define the variable and the utility follows.

:root {
  --color-brand-500: #5b21b6;
  --spacing-gutter: 2.5rem;
}

<div tw="bg-brand-500 p-gutter" />

Pass the same tokens as a variables option when it is easier to build them in code. They become a :root rule appended after your stylesheets, so an equally specific :root declaration in your CSS loses to them. A declaration on the element itself, or an !important one, still wins.

const image = await render(<div tw="bg-brand-500 p-gutter" />, {
  width: 1200,
  height: 630,
  variables: { "--color-brand-500": "#5b21b6", "--spacing-gutter": "2.5rem" },
});

Because the value comes from the cascade, redefining a token under a media query or a selector works like it does for any other custom property:

:root {
  --color-brand-500: #5b21b6;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-brand-500: #a78bfa;
  }
}

The namespace picks which utilities a token reaches:

Some things behave differently from Tailwind here:

• Gradients, shadows, filters, transforms and animations merge across utilities before the cascade runs, so --shadow-*, --drop-shadow-*, --text-shadow-*, --blur-* and --animate-* are not read.
• Directional corners (rounded-t-*), logical sides (ms-*, ps-*) and the bare rounded and aspect-video shorthands keep their built-in values.
• A color with an opacity modifier, bg-brand-500/50, uses the built-in scale rather than the variable.
• --color-red-500: initial falls back to the built-in red instead of removing bg-red-500.
• --spacing needs a unit. A bare number makes p-4 compute pixels here, where a browser rejects the declaration.

tw is a plain prop, so build it dynamically:

import clsx from "clsx";

const isError = true;

<div tw={clsx("p-4 rounded", isError ? "bg-red-100 text-red-700" : "bg-green-100 text-green-700")}>
  {isError ? "Something went wrong" : "Success!"}
</div>;