UNPKG

markdown-to-poster

Version:

markdown-to-poster component renders Markdown as visually appealing social media images. The project also includes a built-in web editor that can be used as an online Markdown-to-poster editor with a simple one-click deployment.

2,007 lines 568 kB
import { jsxs as gr, Fragment as pu, jsx as Se } from "react/jsx-runtime"; import { forwardRef as Ls, useRef as Os, useState as Ds, useCallback as ws, useImperativeHandle as Ps } from "react"; function Eu(e) { var t, n, r = ""; if (typeof e == "string" || typeof e == "number") r += e; else if (typeof e == "object") if (Array.isArray(e)) { var i = e.length; for (t = 0; t < i; t++) e[t] && (n = Eu(e[t])) && (r && (r += " "), r += n); } else for (n in e) e[n] && (r && (r += " "), r += n); return r; } function Ms() { for (var e, t, n = 0, r = "", i = arguments.length; n < i; n++) (e = arguments[n]) && (t = Eu(e)) && (r && (r += " "), r += t); return r; } const Tr = "-"; function Bs(e) { const t = Hs(e), { conflictingClassGroups: n, conflictingClassGroupModifiers: r } = e; function i(u) { const o = u.split(Tr); return o[0] === "" && o.length !== 1 && o.shift(), gu(o, t) || Fs(u); } function a(u, o) { const l = n[u] || []; return o && r[u] ? [...l, ...r[u]] : l; } return { getClassGroupId: i, getConflictingClassGroupIds: a }; } function gu(e, t) { var u; if (e.length === 0) return t.classGroupId; const n = e[0], r = t.nextPart.get(n), i = r ? gu(e.slice(1), r) : void 0; if (i) return i; if (t.validators.length === 0) return; const a = e.join(Tr); return (u = t.validators.find(({ validator: o }) => o(a))) == null ? void 0 : u.classGroupId; } const jr = /^\[(.+)\]$/; function Fs(e) { if (jr.test(e)) { const t = jr.exec(e)[1], n = t == null ? void 0 : t.substring(0, t.indexOf(":")); if (n) return "arbitrary.." + n; } } function Hs(e) { const { theme: t, prefix: n } = e, r = { nextPart: /* @__PURE__ */ new Map(), validators: [] }; return vs(Object.entries(e.classGroups), n).forEach(([a, u]) => { er(u, r, a, t); }), r; } function er(e, t, n, r) { e.forEach((i) => { if (typeof i == "string") { const a = i === "" ? t : Gr(t, i); a.classGroupId = n; return; } if (typeof i == "function") { if (Us(i)) { er(i(r), t, n, r); return; } t.validators.push({ validator: i, classGroupId: n }); return; } Object.entries(i).forEach(([a, u]) => { er(u, Gr(t, a), n, r); }); }); } function Gr(e, t) { let n = e; return t.split(Tr).forEach((r) => { n.nextPart.has(r) || n.nextPart.set(r, { nextPart: /* @__PURE__ */ new Map(), validators: [] }), n = n.nextPart.get(r); }), n; } function Us(e) { return e.isThemeGetter; } function vs(e, t) { return t ? e.map(([n, r]) => { const i = r.map((a) => typeof a == "string" ? t + a : typeof a == "object" ? Object.fromEntries(Object.entries(a).map(([u, o]) => [t + u, o])) : a); return [n, i]; }) : e; } function zs(e) { if (e < 1) return { get: () => { }, set: () => { } }; let t = 0, n = /* @__PURE__ */ new Map(), r = /* @__PURE__ */ new Map(); function i(a, u) { n.set(a, u), t++, t > e && (t = 0, r = n, n = /* @__PURE__ */ new Map()); } return { get(a) { let u = n.get(a); if (u !== void 0) return u; if ((u = r.get(a)) !== void 0) return i(a, u), u; }, set(a, u) { n.has(a) ? n.set(a, u) : i(a, u); } }; } const Tu = "!"; function Ys(e) { const t = e.separator, n = t.length === 1, r = t[0], i = t.length; return function(u) { const o = []; let l = 0, c = 0, f; for (let C = 0; C < u.length; C++) { let N = u[C]; if (l === 0) { if (N === r && (n || u.slice(C, C + i) === t)) { o.push(u.slice(c, C)), c = C + i; continue; } if (N === "/") { f = C; continue; } } N === "[" ? l++ : N === "]" && l--; } const h = o.length === 0 ? u : u.substring(c), E = h.startsWith(Tu), p = E ? h.substring(1) : h, T = f && f > c ? f - c : void 0; return { modifiers: o, hasImportantModifier: E, baseClassName: p, maybePostfixModifierPosition: T }; }; } function Qs(e) { if (e.length <= 1) return e; const t = []; let n = []; return e.forEach((r) => { r[0] === "[" ? (t.push(...n.sort(), r), n = []) : n.push(r); }), t.push(...n.sort()), t; } function qs(e) { return { cache: zs(e.cacheSize), splitModifiers: Ys(e), ...Bs(e) }; } const Vs = /\s+/; function Ws(e, t) { const { splitModifiers: n, getClassGroupId: r, getConflictingClassGroupIds: i } = t, a = /* @__PURE__ */ new Set(); return e.trim().split(Vs).map((u) => { const { modifiers: o, hasImportantModifier: l, baseClassName: c, maybePostfixModifierPosition: f } = n(u); let h = r(f ? c.substring(0, f) : c), E = !!f; if (!h) { if (!f) return { isTailwindClass: !1, originalClassName: u }; if (h = r(c), !h) return { isTailwindClass: !1, originalClassName: u }; E = !1; } const p = Qs(o).join(":"); return { isTailwindClass: !0, modifierId: l ? p + Tu : p, classGroupId: h, originalClassName: u, hasPostfixModifier: E }; }).reverse().filter((u) => { if (!u.isTailwindClass) return !0; const { modifierId: o, classGroupId: l, hasPostfixModifier: c } = u, f = o + l; return a.has(f) ? !1 : (a.add(f), i(l, c).forEach((h) => a.add(o + h)), !0); }).reverse().map((u) => u.originalClassName).join(" "); } function js() { let e = 0, t, n, r = ""; for (; e < arguments.length; ) (t = arguments[e++]) && (n = bu(t)) && (r && (r += " "), r += n); return r; } function bu(e) { if (typeof e == "string") return e; let t, n = ""; for (let r = 0; r < e.length; r++) e[r] && (t = bu(e[r])) && (n && (n += " "), n += t); return n; } function Gs(e, ...t) { let n, r, i, a = u; function u(l) { const c = t.reduce((f, h) => h(f), e()); return n = qs(c), r = n.cache.get, i = n.cache.set, a = o, o(l); } function o(l) { const c = r(l); if (c) return c; const f = Ws(l, n); return i(l, f), f; } return function() { return a(js.apply(null, arguments)); }; } function ne(e) { const t = (n) => n[e] || []; return t.isThemeGetter = !0, t; } const Au = /^\[(?:([a-z-]+):)?(.+)\]$/i, Xs = /^\d+\/\d+$/, $s = /* @__PURE__ */ new Set(["px", "full", "screen"]), Ks = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/, Js = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/, Zs = /^(rgba?|hsla?|hwb|(ok)?(lab|lch))\(.+\)$/, eo = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/, to = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/; function ze(e) { return ut(e) || $s.has(e) || Xs.test(e); } function Ve(e) { return bt(e, "length", lo); } function ut(e) { return !!e && !Number.isNaN(Number(e)); } function Zt(e) { return bt(e, "number", ut); } function kt(e) { return !!e && Number.isInteger(Number(e)); } function no(e) { return e.endsWith("%") && ut(e.slice(0, -1)); } function Y(e) { return Au.test(e); } function We(e) { return Ks.test(e); } const ro = /* @__PURE__ */ new Set(["length", "size", "percentage"]); function io(e) { return bt(e, ro, _u); } function uo(e) { return bt(e, "position", _u); } const ao = /* @__PURE__ */ new Set(["image", "url"]); function so(e) { return bt(e, ao, fo); } function oo(e) { return bt(e, "", co); } function Rt() { return !0; } function bt(e, t, n) { const r = Au.exec(e); return r ? r[1] ? typeof t == "string" ? r[1] === t : t.has(r[1]) : n(r[2]) : !1; } function lo(e) { return Js.test(e) && !Zs.test(e); } function _u() { return !1; } function co(e) { return eo.test(e); } function fo(e) { return to.test(e); } function ho() { const e = ne("colors"), t = ne("spacing"), n = ne("blur"), r = ne("brightness"), i = ne("borderColor"), a = ne("borderRadius"), u = ne("borderSpacing"), o = ne("borderWidth"), l = ne("contrast"), c = ne("grayscale"), f = ne("hueRotate"), h = ne("invert"), E = ne("gap"), p = ne("gradientColorStops"), T = ne("gradientColorStopPositions"), C = ne("inset"), N = ne("margin"), y = ne("opacity"), L = ne("padding"), D = ne("saturate"), B = ne("scale"), U = ne("sepia"), R = ne("skew"), Q = ne("space"), K = ne("translate"), X = () => ["auto", "contain", "none"], x = () => ["auto", "hidden", "clip", "visible", "scroll"], F = () => ["auto", Y, t], P = () => [Y, t], $ = () => ["", ze, Ve], J = () => ["auto", ut, Y], W = () => ["bottom", "center", "left", "left-bottom", "left-top", "right", "right-bottom", "right-top", "top"], ie = () => ["solid", "dashed", "dotted", "double", "none"], ae = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"], pe = () => ["start", "end", "center", "between", "around", "evenly", "stretch"], Ee = () => ["", "0", Y], b = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"], ce = () => [ut, Zt], Te = () => [ut, Y]; return { cacheSize: 500, separator: ":", theme: { colors: [Rt], spacing: [ze, Ve], blur: ["none", "", We, Y], brightness: ce(), borderColor: [e], borderRadius: ["none", "", "full", We, Y], borderSpacing: P(), borderWidth: $(), contrast: ce(), grayscale: Ee(), hueRotate: Te(), invert: Ee(), gap: P(), gradientColorStops: [e], gradientColorStopPositions: [no, Ve], inset: F(), margin: F(), opacity: ce(), padding: P(), saturate: ce(), scale: ce(), sepia: Ee(), skew: Te(), space: P(), translate: P() }, classGroups: { // Layout /** * Aspect Ratio * @see https://tailwindcss.com/docs/aspect-ratio */ aspect: [{ aspect: ["auto", "square", "video", Y] }], /** * Container * @see https://tailwindcss.com/docs/container */ container: ["container"], /** * Columns * @see https://tailwindcss.com/docs/columns */ columns: [{ columns: [We] }], /** * Break After * @see https://tailwindcss.com/docs/break-after */ "break-after": [{ "break-after": b() }], /** * Break Before * @see https://tailwindcss.com/docs/break-before */ "break-before": [{ "break-before": b() }], /** * Break Inside * @see https://tailwindcss.com/docs/break-inside */ "break-inside": [{ "break-inside": ["auto", "avoid", "avoid-page", "avoid-column"] }], /** * Box Decoration Break * @see https://tailwindcss.com/docs/box-decoration-break */ "box-decoration": [{ "box-decoration": ["slice", "clone"] }], /** * Box Sizing * @see https://tailwindcss.com/docs/box-sizing */ box: [{ box: ["border", "content"] }], /** * Display * @see https://tailwindcss.com/docs/display */ display: ["block", "inline-block", "inline", "flex", "inline-flex", "table", "inline-table", "table-caption", "table-cell", "table-column", "table-column-group", "table-footer-group", "table-header-group", "table-row-group", "table-row", "flow-root", "grid", "inline-grid", "contents", "list-item", "hidden"], /** * Floats * @see https://tailwindcss.com/docs/float */ float: [{ float: ["right", "left", "none", "start", "end"] }], /** * Clear * @see https://tailwindcss.com/docs/clear */ clear: [{ clear: ["left", "right", "both", "none", "start", "end"] }], /** * Isolation * @see https://tailwindcss.com/docs/isolation */ isolation: ["isolate", "isolation-auto"], /** * Object Fit * @see https://tailwindcss.com/docs/object-fit */ "object-fit": [{ object: ["contain", "cover", "fill", "none", "scale-down"] }], /** * Object Position * @see https://tailwindcss.com/docs/object-position */ "object-position": [{ object: [...W(), Y] }], /** * Overflow * @see https://tailwindcss.com/docs/overflow */ overflow: [{ overflow: x() }], /** * Overflow X * @see https://tailwindcss.com/docs/overflow */ "overflow-x": [{ "overflow-x": x() }], /** * Overflow Y * @see https://tailwindcss.com/docs/overflow */ "overflow-y": [{ "overflow-y": x() }], /** * Overscroll Behavior * @see https://tailwindcss.com/docs/overscroll-behavior */ overscroll: [{ overscroll: X() }], /** * Overscroll Behavior X * @see https://tailwindcss.com/docs/overscroll-behavior */ "overscroll-x": [{ "overscroll-x": X() }], /** * Overscroll Behavior Y * @see https://tailwindcss.com/docs/overscroll-behavior */ "overscroll-y": [{ "overscroll-y": X() }], /** * Position * @see https://tailwindcss.com/docs/position */ position: ["static", "fixed", "absolute", "relative", "sticky"], /** * Top / Right / Bottom / Left * @see https://tailwindcss.com/docs/top-right-bottom-left */ inset: [{ inset: [C] }], /** * Right / Left * @see https://tailwindcss.com/docs/top-right-bottom-left */ "inset-x": [{ "inset-x": [C] }], /** * Top / Bottom * @see https://tailwindcss.com/docs/top-right-bottom-left */ "inset-y": [{ "inset-y": [C] }], /** * Start * @see https://tailwindcss.com/docs/top-right-bottom-left */ start: [{ start: [C] }], /** * End * @see https://tailwindcss.com/docs/top-right-bottom-left */ end: [{ end: [C] }], /** * Top * @see https://tailwindcss.com/docs/top-right-bottom-left */ top: [{ top: [C] }], /** * Right * @see https://tailwindcss.com/docs/top-right-bottom-left */ right: [{ right: [C] }], /** * Bottom * @see https://tailwindcss.com/docs/top-right-bottom-left */ bottom: [{ bottom: [C] }], /** * Left * @see https://tailwindcss.com/docs/top-right-bottom-left */ left: [{ left: [C] }], /** * Visibility * @see https://tailwindcss.com/docs/visibility */ visibility: ["visible", "invisible", "collapse"], /** * Z-Index * @see https://tailwindcss.com/docs/z-index */ z: [{ z: ["auto", kt, Y] }], // Flexbox and Grid /** * Flex Basis * @see https://tailwindcss.com/docs/flex-basis */ basis: [{ basis: F() }], /** * Flex Direction * @see https://tailwindcss.com/docs/flex-direction */ "flex-direction": [{ flex: ["row", "row-reverse", "col", "col-reverse"] }], /** * Flex Wrap * @see https://tailwindcss.com/docs/flex-wrap */ "flex-wrap": [{ flex: ["wrap", "wrap-reverse", "nowrap"] }], /** * Flex * @see https://tailwindcss.com/docs/flex */ flex: [{ flex: ["1", "auto", "initial", "none", Y] }], /** * Flex Grow * @see https://tailwindcss.com/docs/flex-grow */ grow: [{ grow: Ee() }], /** * Flex Shrink * @see https://tailwindcss.com/docs/flex-shrink */ shrink: [{ shrink: Ee() }], /** * Order * @see https://tailwindcss.com/docs/order */ order: [{ order: ["first", "last", "none", kt, Y] }], /** * Grid Template Columns * @see https://tailwindcss.com/docs/grid-template-columns */ "grid-cols": [{ "grid-cols": [Rt] }], /** * Grid Column Start / End * @see https://tailwindcss.com/docs/grid-column */ "col-start-end": [{ col: ["auto", { span: ["full", kt, Y] }, Y] }], /** * Grid Column Start * @see https://tailwindcss.com/docs/grid-column */ "col-start": [{ "col-start": J() }], /** * Grid Column End * @see https://tailwindcss.com/docs/grid-column */ "col-end": [{ "col-end": J() }], /** * Grid Template Rows * @see https://tailwindcss.com/docs/grid-template-rows */ "grid-rows": [{ "grid-rows": [Rt] }], /** * Grid Row Start / End * @see https://tailwindcss.com/docs/grid-row */ "row-start-end": [{ row: ["auto", { span: [kt, Y] }, Y] }], /** * Grid Row Start * @see https://tailwindcss.com/docs/grid-row */ "row-start": [{ "row-start": J() }], /** * Grid Row End * @see https://tailwindcss.com/docs/grid-row */ "row-end": [{ "row-end": J() }], /** * Grid Auto Flow * @see https://tailwindcss.com/docs/grid-auto-flow */ "grid-flow": [{ "grid-flow": ["row", "col", "dense", "row-dense", "col-dense"] }], /** * Grid Auto Columns * @see https://tailwindcss.com/docs/grid-auto-columns */ "auto-cols": [{ "auto-cols": ["auto", "min", "max", "fr", Y] }], /** * Grid Auto Rows * @see https://tailwindcss.com/docs/grid-auto-rows */ "auto-rows": [{ "auto-rows": ["auto", "min", "max", "fr", Y] }], /** * Gap * @see https://tailwindcss.com/docs/gap */ gap: [{ gap: [E] }], /** * Gap X * @see https://tailwindcss.com/docs/gap */ "gap-x": [{ "gap-x": [E] }], /** * Gap Y * @see https://tailwindcss.com/docs/gap */ "gap-y": [{ "gap-y": [E] }], /** * Justify Content * @see https://tailwindcss.com/docs/justify-content */ "justify-content": [{ justify: ["normal", ...pe()] }], /** * Justify Items * @see https://tailwindcss.com/docs/justify-items */ "justify-items": [{ "justify-items": ["start", "end", "center", "stretch"] }], /** * Justify Self * @see https://tailwindcss.com/docs/justify-self */ "justify-self": [{ "justify-self": ["auto", "start", "end", "center", "stretch"] }], /** * Align Content * @see https://tailwindcss.com/docs/align-content */ "align-content": [{ content: ["normal", ...pe(), "baseline"] }], /** * Align Items * @see https://tailwindcss.com/docs/align-items */ "align-items": [{ items: ["start", "end", "center", "baseline", "stretch"] }], /** * Align Self * @see https://tailwindcss.com/docs/align-self */ "align-self": [{ self: ["auto", "start", "end", "center", "stretch", "baseline"] }], /** * Place Content * @see https://tailwindcss.com/docs/place-content */ "place-content": [{ "place-content": [...pe(), "baseline"] }], /** * Place Items * @see https://tailwindcss.com/docs/place-items */ "place-items": [{ "place-items": ["start", "end", "center", "baseline", "stretch"] }], /** * Place Self * @see https://tailwindcss.com/docs/place-self */ "place-self": [{ "place-self": ["auto", "start", "end", "center", "stretch"] }], // Spacing /** * Padding * @see https://tailwindcss.com/docs/padding */ p: [{ p: [L] }], /** * Padding X * @see https://tailwindcss.com/docs/padding */ px: [{ px: [L] }], /** * Padding Y * @see https://tailwindcss.com/docs/padding */ py: [{ py: [L] }], /** * Padding Start * @see https://tailwindcss.com/docs/padding */ ps: [{ ps: [L] }], /** * Padding End * @see https://tailwindcss.com/docs/padding */ pe: [{ pe: [L] }], /** * Padding Top * @see https://tailwindcss.com/docs/padding */ pt: [{ pt: [L] }], /** * Padding Right * @see https://tailwindcss.com/docs/padding */ pr: [{ pr: [L] }], /** * Padding Bottom * @see https://tailwindcss.com/docs/padding */ pb: [{ pb: [L] }], /** * Padding Left * @see https://tailwindcss.com/docs/padding */ pl: [{ pl: [L] }], /** * Margin * @see https://tailwindcss.com/docs/margin */ m: [{ m: [N] }], /** * Margin X * @see https://tailwindcss.com/docs/margin */ mx: [{ mx: [N] }], /** * Margin Y * @see https://tailwindcss.com/docs/margin */ my: [{ my: [N] }], /** * Margin Start * @see https://tailwindcss.com/docs/margin */ ms: [{ ms: [N] }], /** * Margin End * @see https://tailwindcss.com/docs/margin */ me: [{ me: [N] }], /** * Margin Top * @see https://tailwindcss.com/docs/margin */ mt: [{ mt: [N] }], /** * Margin Right * @see https://tailwindcss.com/docs/margin */ mr: [{ mr: [N] }], /** * Margin Bottom * @see https://tailwindcss.com/docs/margin */ mb: [{ mb: [N] }], /** * Margin Left * @see https://tailwindcss.com/docs/margin */ ml: [{ ml: [N] }], /** * Space Between X * @see https://tailwindcss.com/docs/space */ "space-x": [{ "space-x": [Q] }], /** * Space Between X Reverse * @see https://tailwindcss.com/docs/space */ "space-x-reverse": ["space-x-reverse"], /** * Space Between Y * @see https://tailwindcss.com/docs/space */ "space-y": [{ "space-y": [Q] }], /** * Space Between Y Reverse * @see https://tailwindcss.com/docs/space */ "space-y-reverse": ["space-y-reverse"], // Sizing /** * Width * @see https://tailwindcss.com/docs/width */ w: [{ w: ["auto", "min", "max", "fit", "svw", "lvw", "dvw", Y, t] }], /** * Min-Width * @see https://tailwindcss.com/docs/min-width */ "min-w": [{ "min-w": [Y, t, "min", "max", "fit"] }], /** * Max-Width * @see https://tailwindcss.com/docs/max-width */ "max-w": [{ "max-w": [Y, t, "none", "full", "min", "max", "fit", "prose", { screen: [We] }, We] }], /** * Height * @see https://tailwindcss.com/docs/height */ h: [{ h: [Y, t, "auto", "min", "max", "fit", "svh", "lvh", "dvh"] }], /** * Min-Height * @see https://tailwindcss.com/docs/min-height */ "min-h": [{ "min-h": [Y, t, "min", "max", "fit", "svh", "lvh", "dvh"] }], /** * Max-Height * @see https://tailwindcss.com/docs/max-height */ "max-h": [{ "max-h": [Y, t, "min", "max", "fit", "svh", "lvh", "dvh"] }], /** * Size * @see https://tailwindcss.com/docs/size */ size: [{ size: [Y, t, "auto", "min", "max", "fit"] }], // Typography /** * Font Size * @see https://tailwindcss.com/docs/font-size */ "font-size": [{ text: ["base", We, Ve] }], /** * Font Smoothing * @see https://tailwindcss.com/docs/font-smoothing */ "font-smoothing": ["antialiased", "subpixel-antialiased"], /** * Font Style * @see https://tailwindcss.com/docs/font-style */ "font-style": ["italic", "not-italic"], /** * Font Weight * @see https://tailwindcss.com/docs/font-weight */ "font-weight": [{ font: ["thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black", Zt] }], /** * Font Family * @see https://tailwindcss.com/docs/font-family */ "font-family": [{ font: [Rt] }], /** * Font Variant Numeric * @see https://tailwindcss.com/docs/font-variant-numeric */ "fvn-normal": ["normal-nums"], /** * Font Variant Numeric * @see https://tailwindcss.com/docs/font-variant-numeric */ "fvn-ordinal": ["ordinal"], /** * Font Variant Numeric * @see https://tailwindcss.com/docs/font-variant-numeric */ "fvn-slashed-zero": ["slashed-zero"], /** * Font Variant Numeric * @see https://tailwindcss.com/docs/font-variant-numeric */ "fvn-figure": ["lining-nums", "oldstyle-nums"], /** * Font Variant Numeric * @see https://tailwindcss.com/docs/font-variant-numeric */ "fvn-spacing": ["proportional-nums", "tabular-nums"], /** * Font Variant Numeric * @see https://tailwindcss.com/docs/font-variant-numeric */ "fvn-fraction": ["diagonal-fractions", "stacked-fractons"], /** * Letter Spacing * @see https://tailwindcss.com/docs/letter-spacing */ tracking: [{ tracking: ["tighter", "tight", "normal", "wide", "wider", "widest", Y] }], /** * Line Clamp * @see https://tailwindcss.com/docs/line-clamp */ "line-clamp": [{ "line-clamp": ["none", ut, Zt] }], /** * Line Height * @see https://tailwindcss.com/docs/line-height */ leading: [{ leading: ["none", "tight", "snug", "normal", "relaxed", "loose", ze, Y] }], /** * List Style Image * @see https://tailwindcss.com/docs/list-style-image */ "list-image": [{ "list-image": ["none", Y] }], /** * List Style Type * @see https://tailwindcss.com/docs/list-style-type */ "list-style-type": [{ list: ["none", "disc", "decimal", Y] }], /** * List Style Position * @see https://tailwindcss.com/docs/list-style-position */ "list-style-position": [{ list: ["inside", "outside"] }], /** * Placeholder Color * @deprecated since Tailwind CSS v3.0.0 * @see https://tailwindcss.com/docs/placeholder-color */ "placeholder-color": [{ placeholder: [e] }], /** * Placeholder Opacity * @see https://tailwindcss.com/docs/placeholder-opacity */ "placeholder-opacity": [{ "placeholder-opacity": [y] }], /** * Text Alignment * @see https://tailwindcss.com/docs/text-align */ "text-alignment": [{ text: ["left", "center", "right", "justify", "start", "end"] }], /** * Text Color * @see https://tailwindcss.com/docs/text-color */ "text-color": [{ text: [e] }], /** * Text Opacity * @see https://tailwindcss.com/docs/text-opacity */ "text-opacity": [{ "text-opacity": [y] }], /** * Text Decoration * @see https://tailwindcss.com/docs/text-decoration */ "text-decoration": ["underline", "overline", "line-through", "no-underline"], /** * Text Decoration Style * @see https://tailwindcss.com/docs/text-decoration-style */ "text-decoration-style": [{ decoration: [...ie(), "wavy"] }], /** * Text Decoration Thickness * @see https://tailwindcss.com/docs/text-decoration-thickness */ "text-decoration-thickness": [{ decoration: ["auto", "from-font", ze, Ve] }], /** * Text Underline Offset * @see https://tailwindcss.com/docs/text-underline-offset */ "underline-offset": [{ "underline-offset": ["auto", ze, Y] }], /** * Text Decoration Color * @see https://tailwindcss.com/docs/text-decoration-color */ "text-decoration-color": [{ decoration: [e] }], /** * Text Transform * @see https://tailwindcss.com/docs/text-transform */ "text-transform": ["uppercase", "lowercase", "capitalize", "normal-case"], /** * Text Overflow * @see https://tailwindcss.com/docs/text-overflow */ "text-overflow": ["truncate", "text-ellipsis", "text-clip"], /** * Text Wrap * @see https://tailwindcss.com/docs/text-wrap */ "text-wrap": [{ text: ["wrap", "nowrap", "balance", "pretty"] }], /** * Text Indent * @see https://tailwindcss.com/docs/text-indent */ indent: [{ indent: P() }], /** * Vertical Alignment * @see https://tailwindcss.com/docs/vertical-align */ "vertical-align": [{ align: ["baseline", "top", "middle", "bottom", "text-top", "text-bottom", "sub", "super", Y] }], /** * Whitespace * @see https://tailwindcss.com/docs/whitespace */ whitespace: [{ whitespace: ["normal", "nowrap", "pre", "pre-line", "pre-wrap", "break-spaces"] }], /** * Word Break * @see https://tailwindcss.com/docs/word-break */ break: [{ break: ["normal", "words", "all", "keep"] }], /** * Hyphens * @see https://tailwindcss.com/docs/hyphens */ hyphens: [{ hyphens: ["none", "manual", "auto"] }], /** * Content * @see https://tailwindcss.com/docs/content */ content: [{ content: ["none", Y] }], // Backgrounds /** * Background Attachment * @see https://tailwindcss.com/docs/background-attachment */ "bg-attachment": [{ bg: ["fixed", "local", "scroll"] }], /** * Background Clip * @see https://tailwindcss.com/docs/background-clip */ "bg-clip": [{ "bg-clip": ["border", "padding", "content", "text"] }], /** * Background Opacity * @deprecated since Tailwind CSS v3.0.0 * @see https://tailwindcss.com/docs/background-opacity */ "bg-opacity": [{ "bg-opacity": [y] }], /** * Background Origin * @see https://tailwindcss.com/docs/background-origin */ "bg-origin": [{ "bg-origin": ["border", "padding", "content"] }], /** * Background Position * @see https://tailwindcss.com/docs/background-position */ "bg-position": [{ bg: [...W(), uo] }], /** * Background Repeat * @see https://tailwindcss.com/docs/background-repeat */ "bg-repeat": [{ bg: ["no-repeat", { repeat: ["", "x", "y", "round", "space"] }] }], /** * Background Size * @see https://tailwindcss.com/docs/background-size */ "bg-size": [{ bg: ["auto", "cover", "contain", io] }], /** * Background Image * @see https://tailwindcss.com/docs/background-image */ "bg-image": [{ bg: ["none", { "gradient-to": ["t", "tr", "r", "br", "b", "bl", "l", "tl"] }, so] }], /** * Background Color * @see https://tailwindcss.com/docs/background-color */ "bg-color": [{ bg: [e] }], /** * Gradient Color Stops From Position * @see https://tailwindcss.com/docs/gradient-color-stops */ "gradient-from-pos": [{ from: [T] }], /** * Gradient Color Stops Via Position * @see https://tailwindcss.com/docs/gradient-color-stops */ "gradient-via-pos": [{ via: [T] }], /** * Gradient Color Stops To Position * @see https://tailwindcss.com/docs/gradient-color-stops */ "gradient-to-pos": [{ to: [T] }], /** * Gradient Color Stops From * @see https://tailwindcss.com/docs/gradient-color-stops */ "gradient-from": [{ from: [p] }], /** * Gradient Color Stops Via * @see https://tailwindcss.com/docs/gradient-color-stops */ "gradient-via": [{ via: [p] }], /** * Gradient Color Stops To * @see https://tailwindcss.com/docs/gradient-color-stops */ "gradient-to": [{ to: [p] }], // Borders /** * Border Radius * @see https://tailwindcss.com/docs/border-radius */ rounded: [{ rounded: [a] }], /** * Border Radius Start * @see https://tailwindcss.com/docs/border-radius */ "rounded-s": [{ "rounded-s": [a] }], /** * Border Radius End * @see https://tailwindcss.com/docs/border-radius */ "rounded-e": [{ "rounded-e": [a] }], /** * Border Radius Top * @see https://tailwindcss.com/docs/border-radius */ "rounded-t": [{ "rounded-t": [a] }], /** * Border Radius Right * @see https://tailwindcss.com/docs/border-radius */ "rounded-r": [{ "rounded-r": [a] }], /** * Border Radius Bottom * @see https://tailwindcss.com/docs/border-radius */ "rounded-b": [{ "rounded-b": [a] }], /** * Border Radius Left * @see https://tailwindcss.com/docs/border-radius */ "rounded-l": [{ "rounded-l": [a] }], /** * Border Radius Start Start * @see https://tailwindcss.com/docs/border-radius */ "rounded-ss": [{ "rounded-ss": [a] }], /** * Border Radius Start End * @see https://tailwindcss.com/docs/border-radius */ "rounded-se": [{ "rounded-se": [a] }], /** * Border Radius End End * @see https://tailwindcss.com/docs/border-radius */ "rounded-ee": [{ "rounded-ee": [a] }], /** * Border Radius End Start * @see https://tailwindcss.com/docs/border-radius */ "rounded-es": [{ "rounded-es": [a] }], /** * Border Radius Top Left * @see https://tailwindcss.com/docs/border-radius */ "rounded-tl": [{ "rounded-tl": [a] }], /** * Border Radius Top Right * @see https://tailwindcss.com/docs/border-radius */ "rounded-tr": [{ "rounded-tr": [a] }], /** * Border Radius Bottom Right * @see https://tailwindcss.com/docs/border-radius */ "rounded-br": [{ "rounded-br": [a] }], /** * Border Radius Bottom Left * @see https://tailwindcss.com/docs/border-radius */ "rounded-bl": [{ "rounded-bl": [a] }], /** * Border Width * @see https://tailwindcss.com/docs/border-width */ "border-w": [{ border: [o] }], /** * Border Width X * @see https://tailwindcss.com/docs/border-width */ "border-w-x": [{ "border-x": [o] }], /** * Border Width Y * @see https://tailwindcss.com/docs/border-width */ "border-w-y": [{ "border-y": [o] }], /** * Border Width Start * @see https://tailwindcss.com/docs/border-width */ "border-w-s": [{ "border-s": [o] }], /** * Border Width End * @see https://tailwindcss.com/docs/border-width */ "border-w-e": [{ "border-e": [o] }], /** * Border Width Top * @see https://tailwindcss.com/docs/border-width */ "border-w-t": [{ "border-t": [o] }], /** * Border Width Right * @see https://tailwindcss.com/docs/border-width */ "border-w-r": [{ "border-r": [o] }], /** * Border Width Bottom * @see https://tailwindcss.com/docs/border-width */ "border-w-b": [{ "border-b": [o] }], /** * Border Width Left * @see https://tailwindcss.com/docs/border-width */ "border-w-l": [{ "border-l": [o] }], /** * Border Opacity * @see https://tailwindcss.com/docs/border-opacity */ "border-opacity": [{ "border-opacity": [y] }], /** * Border Style * @see https://tailwindcss.com/docs/border-style */ "border-style": [{ border: [...ie(), "hidden"] }], /** * Divide Width X * @see https://tailwindcss.com/docs/divide-width */ "divide-x": [{ "divide-x": [o] }], /** * Divide Width X Reverse * @see https://tailwindcss.com/docs/divide-width */ "divide-x-reverse": ["divide-x-reverse"], /** * Divide Width Y * @see https://tailwindcss.com/docs/divide-width */ "divide-y": [{ "divide-y": [o] }], /** * Divide Width Y Reverse * @see https://tailwindcss.com/docs/divide-width */ "divide-y-reverse": ["divide-y-reverse"], /** * Divide Opacity * @see https://tailwindcss.com/docs/divide-opacity */ "divide-opacity": [{ "divide-opacity": [y] }], /** * Divide Style * @see https://tailwindcss.com/docs/divide-style */ "divide-style": [{ divide: ie() }], /** * Border Color * @see https://tailwindcss.com/docs/border-color */ "border-color": [{ border: [i] }], /** * Border Color X * @see https://tailwindcss.com/docs/border-color */ "border-color-x": [{ "border-x": [i] }], /** * Border Color Y * @see https://tailwindcss.com/docs/border-color */ "border-color-y": [{ "border-y": [i] }], /** * Border Color Top * @see https://tailwindcss.com/docs/border-color */ "border-color-t": [{ "border-t": [i] }], /** * Border Color Right * @see https://tailwindcss.com/docs/border-color */ "border-color-r": [{ "border-r": [i] }], /** * Border Color Bottom * @see https://tailwindcss.com/docs/border-color */ "border-color-b": [{ "border-b": [i] }], /** * Border Color Left * @see https://tailwindcss.com/docs/border-color */ "border-color-l": [{ "border-l": [i] }], /** * Divide Color * @see https://tailwindcss.com/docs/divide-color */ "divide-color": [{ divide: [i] }], /** * Outline Style * @see https://tailwindcss.com/docs/outline-style */ "outline-style": [{ outline: ["", ...ie()] }], /** * Outline Offset * @see https://tailwindcss.com/docs/outline-offset */ "outline-offset": [{ "outline-offset": [ze, Y] }], /** * Outline Width * @see https://tailwindcss.com/docs/outline-width */ "outline-w": [{ outline: [ze, Ve] }], /** * Outline Color * @see https://tailwindcss.com/docs/outline-color */ "outline-color": [{ outline: [e] }], /** * Ring Width * @see https://tailwindcss.com/docs/ring-width */ "ring-w": [{ ring: $() }], /** * Ring Width Inset * @see https://tailwindcss.com/docs/ring-width */ "ring-w-inset": ["ring-inset"], /** * Ring Color * @see https://tailwindcss.com/docs/ring-color */ "ring-color": [{ ring: [e] }], /** * Ring Opacity * @see https://tailwindcss.com/docs/ring-opacity */ "ring-opacity": [{ "ring-opacity": [y] }], /** * Ring Offset Width * @see https://tailwindcss.com/docs/ring-offset-width */ "ring-offset-w": [{ "ring-offset": [ze, Ve] }], /** * Ring Offset Color * @see https://tailwindcss.com/docs/ring-offset-color */ "ring-offset-color": [{ "ring-offset": [e] }], // Effects /** * Box Shadow * @see https://tailwindcss.com/docs/box-shadow */ shadow: [{ shadow: ["", "inner", "none", We, oo] }], /** * Box Shadow Color * @see https://tailwindcss.com/docs/box-shadow-color */ "shadow-color": [{ shadow: [Rt] }], /** * Opacity * @see https://tailwindcss.com/docs/opacity */ opacity: [{ opacity: [y] }], /** * Mix Blend Mode * @see https://tailwindcss.com/docs/mix-blend-mode */ "mix-blend": [{ "mix-blend": [...ae(), "plus-lighter", "plus-darker"] }], /** * Background Blend Mode * @see https://tailwindcss.com/docs/background-blend-mode */ "bg-blend": [{ "bg-blend": ae() }], // Filters /** * Filter * @deprecated since Tailwind CSS v3.0.0 * @see https://tailwindcss.com/docs/filter */ filter: [{ filter: ["", "none"] }], /** * Blur * @see https://tailwindcss.com/docs/blur */ blur: [{ blur: [n] }], /** * Brightness * @see https://tailwindcss.com/docs/brightness */ brightness: [{ brightness: [r] }], /** * Contrast * @see https://tailwindcss.com/docs/contrast */ contrast: [{ contrast: [l] }], /** * Drop Shadow * @see https://tailwindcss.com/docs/drop-shadow */ "drop-shadow": [{ "drop-shadow": ["", "none", We, Y] }], /** * Grayscale * @see https://tailwindcss.com/docs/grayscale */ grayscale: [{ grayscale: [c] }], /** * Hue Rotate * @see https://tailwindcss.com/docs/hue-rotate */ "hue-rotate": [{ "hue-rotate": [f] }], /** * Invert * @see https://tailwindcss.com/docs/invert */ invert: [{ invert: [h] }], /** * Saturate * @see https://tailwindcss.com/docs/saturate */ saturate: [{ saturate: [D] }], /** * Sepia * @see https://tailwindcss.com/docs/sepia */ sepia: [{ sepia: [U] }], /** * Backdrop Filter * @deprecated since Tailwind CSS v3.0.0 * @see https://tailwindcss.com/docs/backdrop-filter */ "backdrop-filter": [{ "backdrop-filter": ["", "none"] }], /** * Backdrop Blur * @see https://tailwindcss.com/docs/backdrop-blur */ "backdrop-blur": [{ "backdrop-blur": [n] }], /** * Backdrop Brightness * @see https://tailwindcss.com/docs/backdrop-brightness */ "backdrop-brightness": [{ "backdrop-brightness": [r] }], /** * Backdrop Contrast * @see https://tailwindcss.com/docs/backdrop-contrast */ "backdrop-contrast": [{ "backdrop-contrast": [l] }], /** * Backdrop Grayscale * @see https://tailwindcss.com/docs/backdrop-grayscale */ "backdrop-grayscale": [{ "backdrop-grayscale": [c] }], /** * Backdrop Hue Rotate * @see https://tailwindcss.com/docs/backdrop-hue-rotate */ "backdrop-hue-rotate": [{ "backdrop-hue-rotate": [f] }], /** * Backdrop Invert * @see https://tailwindcss.com/docs/backdrop-invert */ "backdrop-invert": [{ "backdrop-invert": [h] }], /** * Backdrop Opacity * @see https://tailwindcss.com/docs/backdrop-opacity */ "backdrop-opacity": [{ "backdrop-opacity": [y] }], /** * Backdrop Saturate * @see https://tailwindcss.com/docs/backdrop-saturate */ "backdrop-saturate": [{ "backdrop-saturate": [D] }], /** * Backdrop Sepia * @see https://tailwindcss.com/docs/backdrop-sepia */ "backdrop-sepia": [{ "backdrop-sepia": [U] }], // Tables /** * Border Collapse * @see https://tailwindcss.com/docs/border-collapse */ "border-collapse": [{ border: ["collapse", "separate"] }], /** * Border Spacing * @see https://tailwindcss.com/docs/border-spacing */ "border-spacing": [{ "border-spacing": [u] }], /** * Border Spacing X * @see https://tailwindcss.com/docs/border-spacing */ "border-spacing-x": [{ "border-spacing-x": [u] }], /** * Border Spacing Y * @see https://tailwindcss.com/docs/border-spacing */ "border-spacing-y": [{ "border-spacing-y": [u] }], /** * Table Layout * @see https://tailwindcss.com/docs/table-layout */ "table-layout": [{ table: ["auto", "fixed"] }], /** * Caption Side * @see https://tailwindcss.com/docs/caption-side */ caption: [{ caption: ["top", "bottom"] }], // Transitions and Animation /** * Tranisition Property * @see https://tailwindcss.com/docs/transition-property */ transition: [{ transition: ["none", "all", "", "colors", "opacity", "shadow", "transform", Y] }], /** * Transition Duration * @see https://tailwindcss.com/docs/transition-duration */ duration: [{ duration: Te() }], /** * Transition Timing Function * @see https://tailwindcss.com/docs/transition-timing-function */ ease: [{ ease: ["linear", "in", "out", "in-out", Y] }], /** * Transition Delay * @see https://tailwindcss.com/docs/transition-delay */ delay: [{ delay: Te() }], /** * Animation * @see https://tailwindcss.com/docs/animation */ animate: [{ animate: ["none", "spin", "ping", "pulse", "bounce", Y] }], // Transforms /** * Transform * @see https://tailwindcss.com/docs/transform */ transform: [{ transform: ["", "gpu", "none"] }], /** * Scale * @see https://tailwindcss.com/docs/scale */ scale: [{ scale: [B] }], /** * Scale X * @see https://tailwindcss.com/docs/scale */ "scale-x": [{ "scale-x": [B] }], /** * Scale Y * @see https://tailwindcss.com/docs/scale */ "scale-y": [{ "scale-y": [B] }], /** * Rotate * @see https://tailwindcss.com/docs/rotate */ rotate: [{ rotate: [kt, Y] }], /** * Translate X * @see https://tailwindcss.com/docs/translate */ "translate-x": [{ "translate-x": [K] }], /** * Translate Y * @see https://tailwindcss.com/docs/translate */ "translate-y": [{ "translate-y": [K] }], /** * Skew X * @see https://tailwindcss.com/docs/skew */ "skew-x": [{ "skew-x": [R] }], /** * Skew Y * @see https://tailwindcss.com/docs/skew */ "skew-y": [{ "skew-y": [R] }], /** * Transform Origin * @see https://tailwindcss.com/docs/transform-origin */ "transform-origin": [{ origin: ["center", "top", "top-right", "right", "bottom-right", "bottom", "bottom-l