@terrazzo/plugin-tailwind typography outputs "[object Object]"

[dalhaan]

Versions

• "@terrazzo/cli": "^2.5.0"
• "@terrazzo/parser": "^2.5.0"
• "@terrazzo/plugin-css": "^2.5.0"
• "@terrazzo/plugin-tailwind": "^2.5.0"
• "@terrazzo/token-tools": "^2.5.0"

Node.js version

22.22.3

OS + version

macOS 26.5.2

Description

@terrazzo/plugin-tailwind's typography styles are being output as [object Object] instead of tailwind tokens (this example follows the plugin-tailwind's typography test fixture):

output.css:

/* -------------------------------------------
 *  Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
 *  template: tailwind.template.css
 * ------------------------------------------- */

@import 'tailwindcss';

@theme {
  --font-sans: "Inter", sans-serif;
  --text-body: [object Object];
  --text-small: [object Object];
  --text-tiny: [object Object];
}

.custom-class {
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
}

terrazzo.config.ts:

import { defineConfig } from '@terrazzo/cli';
import css from '@terrazzo/plugin-css';
import tailwind from '@terrazzo/plugin-tailwind';

export default defineConfig({
  outDir: '.',
  lint: {
    rules: {
      'core/consistent-naming': 'off',
    },
  },
  plugins: [
    css({ skipBuild: true }),
    tailwind({
      template: 'tailwind.template.css',
      filename: 'output.css',
      theme: {
        font: {
          sans: 'font.sans',
        },
        text: ['typography.**'],
      },
    }),
  ],
});

tokens.json:

{
  "font": {
    "$type": "fontFamily",
    "sans": {
      "$value": ["Inter", "sans-serif"]
    }
  },
  "lineHeight": {
    "$type": "dimension",
    "base": {
      "$value": { "value": 1.5, "unit": "rem" }
    }
  },
  "typography": {
    "tiny": {
      "$type": "typography",
      "$description": "Fine print and captions",
      "$value": {
        "fontFamily": ["Inter", "sans-serif"],
        "fontSize": { "value": 0.625, "unit": "rem" },
        "lineHeight": { "value": 1.5, "unit": "rem" },
        "letterSpacing": { "value": 0.125, "unit": "rem" },
        "fontWeight": 500
      }
    },
    "body": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{font.sans}",
        "fontSize": { "value": 1, "unit": "rem" },
        "lineHeight": "{lineHeight.base}",
        "letterSpacing": { "value": 0, "unit": "rem" },
        "fontWeight": 400
      }
    },
    "small": {
      "$type": "typography",
      "$value": "{typography.tiny}"
    }
  }
}

tailwind.template.css:

@import "tailwindcss";

@theme {
  @tz(tzMode: ".");
}

.custom-class {
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
}

expected:

/* -------------------------------------------
 *  Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
 *  template: tailwind.template.css
 * ------------------------------------------- */

@import "tailwindcss";

@theme {
  --font-sans: "Inter", sans-serif;
  --text-body: 1rem;
  --text-body--font-family: var(--font-sans);
  --text-body--line-height: var(--line-height-base);
  --text-body--letter-spacing: 0rem;
  --text-body--font-weight: 400;
  --text-small: var(--typography-tiny-font-size);
  --text-small--font-family: var(--typography-tiny-font-family);
  --text-small--line-height: var(--typography-tiny-line-height);
  --text-small--letter-spacing: var(--typography-tiny-letter-spacing);
  --text-small--font-weight: var(--typography-tiny-font-weight);
  /* Fine print and captions */
  --text-tiny: 0.625rem;
  --text-tiny--font-family: "Inter", sans-serif;
  --text-tiny--line-height: 1.5rem;
  --text-tiny--letter-spacing: 0.125rem;
  --text-tiny--font-weight: 500;
}

.custom-class {
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
}

Reproduction

URL: https://stackblitz.com/edit/vitejs-vite-gachc4fr
Run: npm run build
Check "actual.css"

Expected result

It is expected that the typography properties would be converted to supported tailwind typography tokens:

/* -------------------------------------------
 *  Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
 *  template: tailwind.template.css
 * ------------------------------------------- */

@import "tailwindcss";

@theme {
  --font-sans: "Inter", sans-serif;
  --text-body: 1rem;
  --text-body--font-family: var(--font-sans);
  --text-body--line-height: var(--line-height-base);
  --text-body--letter-spacing: 0rem;
  --text-body--font-weight: 400;
  --text-small: var(--typography-tiny-font-size);
  --text-small--font-family: var(--typography-tiny-font-family);
  --text-small--line-height: var(--typography-tiny-line-height);
  --text-small--letter-spacing: var(--typography-tiny-letter-spacing);
  --text-small--font-weight: var(--typography-tiny-font-weight);
  /* Fine print and captions */
  --text-tiny: 0.625rem;
  --text-tiny--font-family: "Inter", sans-serif;
  --text-tiny--line-height: 1.5rem;
  --text-tiny--letter-spacing: 0.125rem;
  --text-tiny--font-weight: 500;
}

.custom-class {
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
}

Extra

• I’m willing to open a PR (see CONTRIBUTING.md)

[marko1olo]

Opened PR #824 fixing this. It unpacks composite typography tokens into the base --text-{name}: <fontSize> and emits individual sub-properties (--text-{name}--font-family, --text-{name}--line-height, --text-{name}--letter-spacing, --text-{name}--font-weight) matching the expected Tailwind v4 @theme format.