Styling

Pick the approach that matches what you have:

You can mix them. The sections below say which declaration wins.

Inline stylesCopy Anchor Link

The style prop sets CSSProperties on one node. It beats the tag default and every matching stylesheet rule of the same importance.

<div style={{ display: "flex", padding: 48, background: "#0f172a" }}>Hello</div>

CSSCopy Anchor Link

Pass stylesheet text, or a list of stylesheets, through css.

import { render } from "takumi-js";

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

A <style> tag in the JSX or HTML feeds the same stylesheet. Takumi pulls it out of the tree for you.

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

The stylesheet supports:

• Selectors: type, class, id, attribute, and combinators. Structural pseudo-classes such as :first-child and :nth-child(), plus :is(), :where(), :not(), :root, and :lang(). The ::before and ::after pseudo-elements.
• At-rules: @media, @supports, @layer, and @keyframes.
• Values: custom properties with var(), calc(), and shorthands.

Media queriesCopy Anchor Link

@media reads the render's viewport and output:

width, height, aspect-ratio, and resolution take min- and max- prefixes and the range syntax. Both (min-width: 768px) and (400px < width <= 700px) work. Combine queries with and, or, not, and parentheses.

Any other feature, prefers-color-scheme included, matches nothing. The rest of the stylesheet still applies.

Rule objectsCopy Anchor Link

A css entry can be an object instead of text. Use objects to keep application data out of CSS strings.

import { render } from "takumi-js";

const image = await render(<div className="card">Hello Takumi</div>, {
  width: 1200,
  height: 630,
  css: [{ layer: "theme" }, { selector: ".card", style: { background: "#ffffff", padding: 48 } }],
});

Takumi parses each prelude with its rule's grammar. A prelude that contains a block is rejected, so data cannot close the rule and open another.

Tailwind with your bundlerCopy Anchor Link

Compile Tailwind with your bundler, then pass the generated CSS through css. Tailwind does the compiling, so every directive and class name works. The output is still limited to what the stylesheet supports. With Vite, import the stylesheet with ?inline.

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,
      css: stylesheet,
    },
  );
}

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

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

Tailwind without a build stepCopy Anchor Link

The tw prop runs a built-in Tailwind parser. It needs no build step. Satori uses the same prop name.

import { render } from "takumi-js";

const image = await render(
  <div tw="bg-blue-500 p-4 rounded-lg">
    <h1 tw="text-white text-2xl font-bold">Hello Tailwind!</h1>
  </div>,
  { width: 1200, height: 630 },
);

Arbitrary values work. The parser does not cover every Tailwind feature. The parser mapping lists every supported class. Check it when you migrate next/og templates.

tw is a plain string prop, so you can build it at runtime:

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

PreflightCopy Anchor Link

The built-in parser applies no Tailwind Preflight by default. Elements keep their default margins: an <h1> gets a 0.67em top margin until you add mt-0. box-sizing still defaults to border-box.

Without Preflight, a border style utility draws on every side. border-dashed sets border-style on all four sides, and an unset border width is medium. So border-l-2 border-dashed draws a 2px left border and 3px borders on the other sides. Preflight's border: 0 solid reset removes them.

Add the import line a Tailwind stylesheet starts with to turn Preflight on. It removes default margins, list markers, and heading font sizes and weights.

import { render } from "takumi-js";

const image = await render(<h1 tw="text-4xl">Hello Takumi</h1>, {
  width: 1200,
  height: 630,
  css: `@import "tailwindcss";`,
});

Tailwind's other entry points work the same way:

This matches Tailwind's setup without Preflight. Modifiers such as layer(base) and source(none) are ignored.

Utilities in the cascadeCopy Anchor Link

Utilities sit in the last declared layer, as Tailwind orders them:

Prefix a utility with ! to flip the result. Important declarations reverse the layer order, so a ! utility beats an unlayered rule and a normal style declaration.

Tailwind at-rulesCopy Anchor Link

A Tailwind source stylesheet drops into css unchanged. Takumi reads these directives and skips the rest:

.card {
  @apply mt-4 bg-brand-500; /* [!code highlight] */
}

@utility, @custom-variant, @source, @plugin, and @config do not parse. Compile those with Tailwind and use the bundler path.

Design tokensCopy Anchor Link

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). The built-in scale is the fallback, so you only declare tokens you want to change.

Declaring tokensCopy Anchor Link

Declare tokens in a stylesheet or in a rule object. Both feed every var(): in stylesheets, in <style> tags, and in utilities.

A :root rule, or a Tailwind @theme block pasted as-is:

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

A rule object in css, so a token from application data needs no string concatenation. Takumi rejects a value that is not valid for its property, so the value cannot escape its rule.

import { render } from "takumi-js";

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

Which utilities read a tokenCopy Anchor Link

The token's namespace decides which utilities read it:

Overriding tokensCopy Anchor Link

Tokens in a stylesheet follow the cascade. A media query or a selector can override them:

@media (width >= 1000px) {
  :root {
    --color-brand-500: #a78bfa;
  }
}

A rule object sits where its entry sits in css, so array order is cascade order:

Where this differs from TailwindCopy Anchor Link

• Colors reach gradients and shadows. from-brand-500 and shadow-brand-500 read --color-brand-500, as bg-brand-500 does.
• As in Tailwind, a gradient needs bg-linear-*, bg-radial, or bg-conic. Color stops alone paint nothing.
• --color-red-500: initial falls back to the built-in red. It does not remove bg-red-500.
• A bare rounded keeps its built-in value. rounded-sm and the others read the variable.
• --spacing needs a unit. With a bare number, p-4 computes pixels here. A browser rejects that declaration.
• An aliased token stays live. --color-brand: var(--background) follows a --background override in a subtree. In a browser, you need @theme inline for that.