Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/andresilva-cc/grafex/llms.txt

Use this file to discover all available pages before exploring further.

Grafex lets you load external CSS files into a composition by listing them in config.css. The contents of each file are injected as <style> tags inside the HTML <head> before the page is rendered, so every rule you write is available to your JSX just as it would be in a browser. This works with any CSS that produces a plain .css file: hand-authored stylesheets, Tailwind’s compiled output, Sass output, or anything else.

​
Setting up CSS in config

Add a css array to your CompositionConfig. Each entry is a path to a .css file, resolved relative to the composition file: 
// card.tsx
import type { CompositionConfig } from 'grafex';

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

export default function WithCss() {
  return (
    <div
      className="grafex-test"
      style={{
        width: '800px',
        height: '400px',
        background: '#0f172a',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      CSS Support
    </div>
  );
}
The ./styles.css path is resolved relative to card.tsx. Any className you apply in JSX will pick up rules from that file exactly as if the stylesheet were loaded in a browser.

​
Multiple stylesheets

Pass multiple paths to load them all. They are injected in array order, so later files can override earlier ones: 
export const config: CompositionConfig = {
  width: 1200,
  height: 630,
  css: ['./reset.css', './styles.css', './overrides.css'],
};

​
Using Tailwind CSS

Tailwind’s --watch mode pairs naturally with grafex dev. Compile your Tailwind input to a plain CSS file first, then point config.css at the output:
1

Generate the CSS

Run Tailwind’s CLI to compile your input stylesheet:
npx @tailwindcss/cli -i ./input.css -o ./styles.css
2

Reference it in config

Point config.css at the compiled output file:
// 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 flex items-center justify-center bg-gradient-to-br from-indigo-500 to-purple-600 text-white">
      <h1 className="text-6xl font-bold">Hello Tailwind</h1>
    </div>
  );
}
3

Export the composition

npx grafex export -f card.tsx -o card.png
For live development, run Tailwind’s watcher and grafex dev side by side. Grafex watches every file listed in config.css — when Tailwind rewrites styles.css, Grafex detects the change and re-renders within ~100ms: 
# 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
See the Tailwind guide for a complete workflow including concurrently setup and the npm run dev / npm run build script pattern.

​
Theming with htmlAttributes

CSS selectors that target the <html> element — like Tailwind v4’s :root[data-theme="dark"] — require the attribute to be present on the HTML root. Use config.htmlAttributes to set it: 
import type { CompositionConfig } from 'grafex';

export const config: CompositionConfig = {
  width: 1200,
  height: 630,
  css: ['./styles.css'],
  htmlAttributes: {
    'data-theme': 'dark',
    lang: 'en',
  },
};
This renders as <html data-theme="dark" lang="en">, so any CSS rule scoped to [data-theme="dark"] applies correctly. Attribute values are HTML-escaped automatically.

​
Per-variant theming

Variants can override htmlAttributes to switch themes without duplicating the composition file. In the example below, one export gets the light theme and another gets dark: 
import type { CompositionConfig } from 'grafex';

export const config: CompositionConfig = {
  width: 1200,
  height: 630,
  css: ['./styles.css'],
  htmlAttributes: { 'data-theme': 'light' },
  variants: {
    light: {},
    dark: { htmlAttributes: { 'data-theme': 'dark' } },
  },
};
The dark variant’s htmlAttributes are spread over the base attributes — only the keys you specify in the variant change; the rest are inherited.
The css field is replaced (not merged) in variants. If your base config sets css: ['./base.css'] and a variant sets css: ['./dark.css'], that variant uses only dark.css. List every stylesheet the variant needs in its own css array.

Build docs developers (and LLMs) love

Get started for freeTalk to us