@formepdf/tailwind 0.7.10 → 0.7.12

package/README.md

@@ -0,0 +1,78 @@
+# @formepdf/tailwind
+
+Style [Forme](https://formepdf.com) PDF components with Tailwind CSS utility classes.
+
+```bash
+npm install @formepdf/tailwind
+```
+
+```tsx
+import { tw } from '@formepdf/tailwind';
+import { Document, Page, View, Text } from '@formepdf/react';
+
+<Document>
+  <Page size="Letter" margin={54}>
+    <View style={tw("flex-row items-center justify-between p-6 bg-slate-100 rounded-lg")}>
+      <Text style={tw("text-2xl font-bold text-slate-900")}>Invoice #001</Text>
+      <Text style={tw("text-sm text-slate-500")}>March 2026</Text>
+    </View>
+  </Page>
+</Document>
+```
+
+`tw()` parses a space-separated string of Tailwind classes and returns a plain style object. Unknown classes are silently ignored. When classes conflict, the last one wins.
+
+```tsx
+tw("p-4 text-lg font-bold text-blue-500")
+// → { padding: 16, fontSize: 18, fontWeight: 700, color: '#3b82f6' }
+```
+
+## Supported classes
+
+**Spacing** — `p-{n}`, `px-{n}`, `py-{n}`, `pt-{n}`, `m-{n}`, `mx-{n}`, `mx-auto`, `space-y-{n}`, `space-x-{n}`, negative values (`-mt-4`), `p-px`
+
+**Typography** — `text-xs` through `text-9xl`, `font-thin` through `font-black`, `italic`, `text-left/center/right/justify`, `leading-*`, `tracking-*`, `underline`, `line-through`, `uppercase`, `lowercase`, `capitalize`
+
+**Colors** — Full Tailwind palette (slate, gray, red, blue, etc.) with shades 50–950: `text-{color}-{shade}`, `bg-{color}-{shade}`, `border-{color}-{shade}`
+
+**Layout** — `flex-row`, `flex-col`, `items-*`, `justify-*`, `self-*`, `flex-1`, `flex-wrap`, `gap-{n}`
+
+**Dimensions** — `w-{n}`, `h-{n}`, `w-full`, `w-auto`, `w-1/2`, `min-w-{n}`, `max-w-{n}`
+
+**Grid** — `grid`, `grid-cols-{n}`, `col-span-{n}`, `col-start-{n}`, `row-span-{n}`
+
+**Borders** — `border`, `border-{n}`, `border-t`, `rounded`, `rounded-lg`, `rounded-full`
+
+**Other** — `relative`, `absolute`, `top-{n}`, `overflow-hidden`, `opacity-{n}`
+
+**Arbitrary values** — `w-[200]`, `text-[14px]`, `p-[20]`, `text-[#333]`, `bg-[#ff0000]`
+
+## Auto margins
+
+Horizontal centering with `mx-auto`:
+
+```tsx
+<View style={tw("mx-auto w-64")}>
+  <Text>Centered content</Text>
+</View>
+```
+
+Also supports `my-auto`, `mt-auto`, `mr-auto`, `mb-auto`, `ml-auto`, `m-auto`.
+
+## TypeScript
+
+`tw()` returns a `FormeStyle` compatible with Forme component `style` props — no type casting needed:
+
+```tsx
+import { tw, type FormeStyle } from '@formepdf/tailwind';
+
+const style: FormeStyle = tw("p-4 bg-white rounded-lg");
+```
+
+## What's not supported
+
+Tailwind features that don't apply to PDF rendering: responsive prefixes (`sm:`, `md:`), state variants (`hover:`, `focus:`), dark mode, `z-index`, `aspect-ratio`.
+
+## Docs
+
+Full documentation: [docs.formepdf.com/tailwind](https://docs.formepdf.com/tailwind)

package/dist/parsers.js

@@ -45,9 +45,20 @@ function parseSpacing(cls) {
     return null;
 }
 // ── Typography ───────────────────────────────────────────────────────
-const textSizes = {
-    xs: 12, sm: 14, base: 16, lg: 18, xl: 20,
-    "2xl": 24, "3xl": 30, "4xl": 36, "5xl": 48, "6xl": 60, "7xl": 72, "8xl": 96, "9xl": 128,
+const textSizeDefaults = {
+    xs: { fontSize: 12, lineHeight: 16 },
+    sm: { fontSize: 14, lineHeight: 20 },
+    base: { fontSize: 16, lineHeight: 24 },
+    lg: { fontSize: 18, lineHeight: 28 },
+    xl: { fontSize: 20, lineHeight: 28 },
+    "2xl": { fontSize: 24, lineHeight: 32 },
+    "3xl": { fontSize: 30, lineHeight: 36 },
+    "4xl": { fontSize: 36, lineHeight: 40 },
+    "5xl": { fontSize: 48, lineHeight: 48 },
+    "6xl": { fontSize: 60, lineHeight: 60 },
+    "7xl": { fontSize: 72, lineHeight: 72 },
+    "8xl": { fontSize: 96, lineHeight: 96 },
+    "9xl": { fontSize: 128, lineHeight: 128 },
 };
 const fontWeights = {
     thin: 100, extralight: 200, light: 300, normal: 400, medium: 500,
@@ -63,8 +74,9 @@ function parseTypography(cls) {
     // text-{size}
     if (cls.startsWith("text-")) {
         const rest = cls.substring(5);
-        if (textSizes[rest] !== undefined)
-            return { fontSize: textSizes[rest] };
+        const def = textSizeDefaults[rest];
+        if (def)
+            return { fontSize: def.fontSize, lineHeight: def.lineHeight / def.fontSize };
         // text-left/center/right/justify
         if (rest === "left" || rest === "center" || rest === "right" || rest === "justify") {
             return { textAlign: rest };
@@ -89,7 +101,7 @@ function parseTypography(cls) {
             return { lineHeight: namedLeading[rest] };
         const n = parseFloat(rest);
         if (!isNaN(n))
-            return { lineHeight: n * 4 };
+            return { lineHeight: n * 0.25 };
         return null;
     }
     // tracking-{value}
@@ -123,7 +135,7 @@ function parseColorClass(cls) {
     if (cls.startsWith("text-")) {
         const rest = cls.substring(5);
         // Skip size and alignment keywords
-        if (textSizes[rest] !== undefined)
+        if (textSizeDefaults[rest] !== undefined)
             return null;
         if (rest === "left" || rest === "center" || rest === "right" || rest === "justify")
             return null;
@@ -226,6 +238,19 @@ function parseLayout(cls) {
         return { flexWrap: "wrap" };
     if (cls === "flex-nowrap")
         return { flexWrap: "nowrap" };
+    // space-y-{n} / space-x-{n} → map to gap (flex container spacing)
+    if (cls.startsWith("space-y-")) {
+        const n = parseFloat(cls.substring(8));
+        if (!isNaN(n))
+            return { rowGap: n * 4 };
+        return null;
+    }
+    if (cls.startsWith("space-x-")) {
+        const n = parseFloat(cls.substring(8));
+        if (!isNaN(n))
+            return { columnGap: n * 4 };
+        return null;
+    }
     // gap
     if (cls.startsWith("gap-x-")) {
         const n = parseFloat(cls.substring(6));
@@ -460,6 +485,7 @@ const arbitraryPrefixMap = {
     m: "margin", mx: "marginHorizontal", my: "marginVertical",
     mt: "marginTop", mr: "marginRight", mb: "marginBottom", ml: "marginLeft",
     gap: "gap", "gap-x": "columnGap", "gap-y": "rowGap",
+    "space-x": "columnGap", "space-y": "rowGap",
     top: "top", right: "right", bottom: "bottom", left: "left",
     rounded: "borderRadius",
     opacity: "opacity",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formepdf/tailwind",
-  "version": "0.7.10",
+  "version": "0.7.12",
   "description": "Tailwind CSS class support for Forme PDF templates",
   "type": "module",
   "main": "./dist/index.js",