Using Tailwind CSS

Grafex works with Tailwind CSS out of the box. No plugins, no special config — just generate a CSS file and reference it in your composition.

How it works

Grafex's config.css field accepts an array of local CSS file paths. It's a generic injection mechanism — Grafex reads each file from disk and injects its contents as a <style> tag before rendering. This means any CSS preprocessor output works: plain CSS, Tailwind, Sass, PostCSS — anything that produces a .css file.

The Tailwind workflow is: run Tailwind's CLI to compile your input file into a CSS output, then point config.css at that output. In dev mode, Tailwind's --watch flag recompiles on every file change, and Grafex watches the CSS file and re-renders automatically.

Key DX feature: grafex dev watches all files listed in config.css. When Tailwind's --watch rewrites styles.css, Grafex detects the change and re-renders within ~100ms. The two tools compose naturally — edit your composition, see the result instantly. If styles.css doesn't exist yet at startup, grafex dev renders without it and re-renders as soon as the file appears — so concurrently just works with no pre-build step.

Setup

1. Install dependencies

bash

npm install --save-dev @tailwindcss/cli concurrently

2. Create your CSS input file

Create input.css in the same directory as your composition:

input.css

@import "tailwindcss";

3. Write your composition

Reference the compiled output in config.css and use Tailwind utility classes via className:

card.tsx

import type { CompositionConfig } from 'grafex';

export const config: CompositionConfig = {
  width: 1200,
  height: 630,
  css: ['./styles.css'],
};

export default function Card() {
  return (
    <div className="w-full h-full bg-slate-900 flex flex-col justify-between p-16 relative overflow-hidden">
      {/* Background glow */}
      <div className="absolute -top-20 -right-20 w-96 h-96 rounded-full bg-pink-500/10 blur-3xl" />

      {/* Top: tag */}
      <div className="flex items-center gap-3 z-10">
        <span className="bg-lime-400/15 border border-lime-400/30 rounded-md px-3 py-1 text-lime-400 text-sm font-semibold uppercase tracking-widest">
          Tutorial
        </span>
      </div>

      {/* Middle: title + description */}
      <div className="flex flex-col gap-5 z-10">
        <h1 className="text-slate-50 text-6xl font-bold leading-tight tracking-tight">
          Building Modern APIs
        </h1>
        <p className="text-slate-400 text-2xl leading-relaxed">
          Best practices for REST and GraphQL in 2026
        </p>
      </div>

      {/* Bottom: author + site */}
      <div className="flex items-center justify-between z-10">
        <div className="flex items-center gap-4">
          <div className="w-12 h-12 rounded-full bg-gradient-to-br from-pink-400 to-sky-400 flex items-center justify-center text-white text-base font-bold">
            JS
          </div>
          <div className="flex flex-col gap-0.5">
            <span className="text-slate-200 text-lg font-semibold">Jane Smith</span>
            <span className="text-slate-500 text-sm">5 min read</span>
          </div>
        </div>
        <span className="text-slate-500 text-base font-semibold tracking-wide">dev.blog</span>
      </div>

      {/* Bottom accent stripe */}
      <div className="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-pink-400 via-sky-400 to-lime-400" />
    </div>
  );
}

4. Add npm scripts

Add these scripts to your package.json:

package.json

{
  "scripts": {
    "dev": "concurrently \"npx @tailwindcss/cli -i ./input.css -o ./styles.css --watch\" \"npx grafex dev -f card.tsx\"",
    "build": "npx @tailwindcss/cli -i ./input.css -o ./styles.css && npx grafex export -f card.tsx -o card.png"
  },
  "devDependencies": {
    "@tailwindcss/cli": "^4.0.0",
    "concurrently": "^9.0.0",
    "grafex": "^1.0.0"
  }
}

Development workflow

Run npm run dev to start both watchers at once. Or run them separately if you prefer:

Terminal 1 — Tailwind watcher

npx @tailwindcss/cli -i ./input.css -o ./styles.css --watch

Terminal 2 — Grafex dev server

npx grafex dev -f card.tsx

Open http://localhost:3000 to see the live preview. Edit your composition — the preview updates automatically.

Production build

Compile the CSS once, then export the composition:

bash

npx @tailwindcss/cli -i ./input.css -o ./styles.css && npx grafex export -f card.tsx -o card.png

Or use the npm run build script from the setup step above.

Working example

The examples/tailwind/ directory in the repository contains a complete runnable example with all the files described on this page.

Files in examples/tailwind/

input.css — Tailwind CSS entry point
card.tsx — OG card composition using Tailwind classes
package.json — dev and build scripts
tsconfig.json — TypeScript/JSX settings

Compositions

CSS files, styling patterns, and the full config reference

CLI Reference

All grafex dev and grafex export flags