@inkoxide/tailwind

Turns Tailwind class strings into Inkoxide style objects, using the real Tailwind v4 compiler. Unsupported classes throw outside production and are ignored with a warning in production. Install it next to @inkoxide/render to style with className; without it, style works alone.

Part of Inkoxide. Requires Node.js >=22; ES modules only.

npm install @inkoxide/tailwind

Usage

import { DEFAULT_THEME_CSS, initTailwind, setTailwindStrict, tw } from '@inkoxide/tailwind';

await initTailwind(); // once per process
const style = tw('p-4 text-lg font-bold text-slate-700');
console.log(style); // { paddingTop: 12, …, fontSize: 13.5, fontWeight: 700, color: […] }

// `em`, `vw` and `vh` in arbitrary values resolve against the units you give, in points:
// the inherited font size (and the element's, when something else sets it) and the page size.
tw('w-[2em] h-[10vh]', { parentFontSize: 12, page: { width: 595.28, height: 841.89 } }); // { width: 24, height: 84.189 }

// Options, all optional: `css`, a theme (extend the bundled one: its font stacks name the
// bundled fonts); `base`, the directory its @imports resolve from; `strict` (default: outside
// production); and `cacheSize`, how many class strings are cached (default 5000).
await initTailwind({
  css: DEFAULT_THEME_CSS + '@theme { --color-accent: #1e4a99; }',
  strict: true,
  cacheSize: 10000,
});
setTailwindStrict(false); // log unsupported classes once instead of throwing
tw.warm(['p-4 text-lg', 'flex gap-2']); // map known class strings ahead, e.g. at server start
tw.cacheSize(); // 2: the class strings cached

Licence

MIT