Skip to content

Instantly share code, notes, and snippets.

@Squix

Squix/tailwind_penpot_tokens.json

Last active November 16, 2025 22:12
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Squix/89fd4d0f0383dab5092dfa36b426a8b4 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Squix/89fd4d0f0383dab5092dfa36b426a8b4 to your computer and use it in GitHub Desktop.
Download ZIP
TailwindCSS default theme design tokens for Penpot implementation. There are spacing, border-width, border-radius and sizing tokens.
Raw
tailwind_penpot_tokens.json
{
"Global": {
"spacing-01": { "$value": "4px", "$type": "spacing", "$description": "p-1, m-1, ..." },
"spacing-02": { "$value": "8px", "$type": "spacing", "$description": "p-2, m-2, ..." },
"spacing-03": { "$value": "12px", "$type": "spacing", "$description": "p-3, m-3, ..." },
"spacing-04": { "$value": "16px", "$type": "spacing", "$description": "p-4, m-4, ..." },
"spacing-05": { "$value": "20px", "$type": "spacing", "$description": "p-5, m-5, ..." },
"spacing-06": { "$value": "24px", "$type": "spacing", "$description": "p-6, m-6, ..." },
"spacing-07": { "$value": "28px", "$type": "spacing", "$description": "p-7, m-7, ..." },
"spacing-08": { "$value": "32px", "$type": "spacing", "$description": "p-8, m-8, ..." },
"spacing-09": { "$value": "36px", "$type": "spacing", "$description": "p-9, m-9, ..." },
"spacing-10": { "$value": "40px", "$type": "spacing", "$description": "p-10, m-10, ..." },
"spacing-11": { "$value": "44px", "$type": "spacing", "$description": "p-11, m-11, ..." },
"spacing-12": { "$value": "48px", "$type": "spacing", "$description": "p-12, m-12, ..." },
"spacing-14": { "$value": "56px", "$type": "spacing", "$description": "p-14, m-14, ..." },
"spacing-16": { "$value": "64px", "$type": "spacing", "$description": "p-16, m-16, ..." },
"spacing-20": { "$value": "80px", "$type": "spacing", "$description": "p-20, m-20, ..." },
"spacing-24": { "$value": "96px", "$type": "spacing", "$description": "p-24, m-24, ..." },
"spacing-28": { "$value": "112px", "$type": "spacing", "$description": "p-28, m-28, ..." },
"spacing-32": { "$value": "128px", "$type": "spacing", "$description": "p-32, m-32, ..." },
"spacing-36": { "$value": "144px", "$type": "spacing", "$description": "p-36, m-36, ..." },
"spacing-40": { "$value": "160px", "$type": "spacing", "$description": "p-40, m-40, ..." },
"spacing-44": { "$value": "176px", "$type": "spacing", "$description": "p-44, m-44, ..." },
"spacing-48": { "$value": "192px", "$type": "spacing", "$description": "p-48, m-48, ..." },
"spacing-52": { "$value": "208px", "$type": "spacing", "$description": "p-52, m-52, ..." },
"spacing-56": { "$value": "224px", "$type": "spacing", "$description": "p-56, m-56, ..." },
"spacing-60": { "$value": "240px", "$type": "spacing", "$description": "p-60, m-60, ..." },
"spacing-64": { "$value": "256px", "$type": "spacing", "$description": "p-64, m-64, ..." },
"spacing-72": { "$value": "288px", "$type": "spacing", "$description": "p-72, m-72, ..." },
"spacing-80": { "$value": "320px", "$type": "spacing", "$description": "p-80, m-80, ..." },
"spacing-96": { "$value": "384px", "$type": "spacing", "$description": "p-96, m-96, ..." },
"size-01": { "$value": "{spacing-01}", "$type": "sizing", "$description": "w-1, h-1 and size-1" },
"size-02": { "$value": "{spacing-02}", "$type": "sizing", "$description": "w-2, h-2 and size-2" },
"size-03": { "$value": "{spacing-03}", "$type": "sizing", "$description": "w-3, h-3 and size-3" },
"size-04": { "$value": "{spacing-04}", "$type": "sizing", "$description": "w-4, h-4 and size-4" },
"size-05": { "$value": "{spacing-05}", "$type": "sizing", "$description": "w-5, h-5 and size-5" },
"size-06": { "$value": "{spacing-06}", "$type": "sizing", "$description": "w-6, h-6 and size-6" },
"size-07": { "$value": "{spacing-07}", "$type": "sizing", "$description": "w-7, h-7 and size-7" },
"size-08": { "$value": "{spacing-08}", "$type": "sizing", "$description": "w-8, h-8 and size-8" },
"size-09": { "$value": "{spacing-09}", "$type": "sizing", "$description": "w-9, h-9 and size-9" },
"size-10": { "$value": "{spacing-10}", "$type": "sizing", "$description": "w-10, h-10 and size-10" },
"size-11": { "$value": "{spacing-11}", "$type": "sizing", "$description": "w-11, h-11 and size-11" },
"size-12": { "$value": "{spacing-12}", "$type": "sizing", "$description": "w-12, h-12 and size-12" },
"size-14": { "$value": "{spacing-14}", "$type": "sizing", "$description": "w-14, h-14 and size-14" },
"size-16": { "$value": "{spacing-16}", "$type": "sizing", "$description": "w-16, h-16 and size-16" },
"size-20": { "$value": "{spacing-20}", "$type": "sizing", "$description": "w-20, h-20 and size-20" },
"size-24": { "$value": "{spacing-24}", "$type": "sizing", "$description": "w-24, h-24 and size-24" },
"size-28": { "$value": "{spacing-28}", "$type": "sizing", "$description": "w-28, h-28 and size-28" },
"size-32": { "$value": "{spacing-32}", "$type": "sizing", "$description": "w-32, h-32 and size-32" },
"size-36": { "$value": "{spacing-36}", "$type": "sizing", "$description": "w-36, h-36 and size-36" },
"size-40": { "$value": "{spacing-40}", "$type": "sizing", "$description": "w-40, h-40 and size-40" },
"size-44": { "$value": "{spacing-44}", "$type": "sizing", "$description": "w-44, h-44 and size-44" },
"size-48": { "$value": "{spacing-48}", "$type": "sizing", "$description": "w-48, h-48 and size-48" },
"size-52": { "$value": "{spacing-52}", "$type": "sizing", "$description": "w-52, h-52 and size-52" },
"size-56": { "$value": "{spacing-56}", "$type": "sizing", "$description": "w-56, h-56 and size-56" },
"size-60": { "$value": "{spacing-60}", "$type": "sizing", "$description": "w-60, h-60 and size-60" },
"size-64": { "$value": "{spacing-64}", "$type": "sizing", "$description": "w-64, h-64 and size-64" },
"size-72": { "$value": "{spacing-72}", "$type": "sizing", "$description": "w-72, h-72 and size-72" },
"size-80": { "$value": "{spacing-80}", "$type": "sizing", "$description": "w-80, h-80 and size-80" },
"size-96": { "$value": "{spacing-96}", "$type": "sizing", "$description": "w-96, h-96 and size-96" },
"rounded-xs": { "$value": "2px", "$type": "borderRadius", "$description": "" },
"rounded-sm": { "$value": "4px", "$type": "borderRadius", "$description": "" },
"rounded-md": { "$value": "6px", "$type": "borderRadius", "$description": "" },
"rounded-lg": { "$value": "8px", "$type": "borderRadius", "$description": "" },
"rounded-xl": { "$value": "12px", "$type": "borderRadius", "$description": "" },
"rounded-2xl": { "$value": "16px", "$type": "borderRadius", "$description": "" },
"rounded-3xl": { "$value": "24px", "$type": "borderRadius", "$description": "" },
"rounded-4xl": { "$value": "32px", "$type": "borderRadius", "$description": "" },
"rounded-full": { "$value": "1000000000", "$type": "borderRadius", "$description": "" },
"border": { "$value": "1", "$type": "strokeWidth", "$description": "" },
"border-02": { "$value": "2", "$type": "strokeWidth", "$description": "" },
"border-04": { "$value": "4", "$type": "strokeWidth", "$description": "" },
"border-08": { "$value": "8", "$type": "strokeWidth", "$description": "" },
"yellow-50": { "$value": "#fefce8", "$type": "color", "$description": "" }
},
"$themes": [],
"$metadata": {
"tokenSetOrder": ["Global"],
"activeThemes": [],
"activeSets": ["Global"]
}
}
@Squix
Copy link
Author

Squix commented Sep 13, 2025

Thanks!
I didn't add them to my file because I never use the whole Tailwind palette, only a subset of it.

@sondresolb
Copy link

sondresolb commented Oct 18, 2025

Thanks for the great contributions! Sharing my latest tailwind default design tokens file. It includes some additional tokens:

{
    "tailwind-defaults": {
        "font-sans": {
            "$value": [
                "ui-sans-serif",
                "system-ui",
                "sans-serif",
                "Apple Color Emoji",
                "Segoe UI Emoji",
                "Segoe UI Symbol",
                "Noto Color Emoji"
            ],
            "$type": "fontFamilies",
            "$description": ""
        },
        "font-serif": {
            "$value": [
                "ui-serif",
                "Georgia",
                "Cambria",
                "Times New Roman",
                "Times",
                "serif"
            ],
            "$type": "fontFamilies",
            "$description": ""
        },
        "font-mono": {
            "$value": [
                "ui-monospace",
                "SFMono-Regular",
                "Menlo",
                "Monaco",
                "Consolas",
                "Liberation Mono",
                "Courier New",
                "monospace"
            ],
            "$type": "fontFamilies",
            "$description": ""
        },
        "spacing-01": {
            "$value": "4px",
            "$type": "spacing",
            "$description": "p-1, m-1, ..."
        },
        "spacing-02": {
            "$value": "8px",
            "$type": "spacing",
            "$description": "p-2, m-2, ..."
        },
        "spacing-03": {
            "$value": "12px",
            "$type": "spacing",
            "$description": "p-3, m-3, ..."
        },
        "spacing-04": {
            "$value": "16px",
            "$type": "spacing",
            "$description": "p-4, m-4, ..."
        },
        "spacing-05": {
            "$value": "20px",
            "$type": "spacing",
            "$description": "p-5, m-5, ..."
        },
        "spacing-06": {
            "$value": "24px",
            "$type": "spacing",
            "$description": "p-6, m-6, ..."
        },
        "spacing-07": {
            "$value": "28px",
            "$type": "spacing",
            "$description": "p-7, m-7, ..."
        },
        "spacing-08": {
            "$value": "32px",
            "$type": "spacing",
            "$description": "p-8, m-8, ..."
        },
        "spacing-09": {
            "$value": "36px",
            "$type": "spacing",
            "$description": "p-9, m-9, ..."
        },
        "spacing-10": {
            "$value": "40px",
            "$type": "spacing",
            "$description": "p-10, m-10, ..."
        },
        "spacing-11": {
            "$value": "44px",
            "$type": "spacing",
            "$description": "p-11, m-11, ..."
        },
        "spacing-12": {
            "$value": "48px",
            "$type": "spacing",
            "$description": "p-12, m-12, ..."
        },
        "spacing-14": {
            "$value": "56px",
            "$type": "spacing",
            "$description": "p-14, m-14, ..."
        },
        "spacing-16": {
            "$value": "64px",
            "$type": "spacing",
            "$description": "p-16, m-16, ..."
        },
        "spacing-20": {
            "$value": "80px",
            "$type": "spacing",
            "$description": "p-20, m-20, ..."
        },
        "spacing-24": {
            "$value": "96px",
            "$type": "spacing",
            "$description": "p-24, m-24, ..."
        },
        "spacing-28": {
            "$value": "112px",
            "$type": "spacing",
            "$description": "p-28, m-28, ..."
        },
        "spacing-32": {
            "$value": "128px",
            "$type": "spacing",
            "$description": "p-32, m-32, ..."
        },
        "spacing-36": {
            "$value": "144px",
            "$type": "spacing",
            "$description": "p-36, m-36, ..."
        },
        "spacing-40": {
            "$value": "160px",
            "$type": "spacing",
            "$description": "p-40, m-40, ..."
        },
        "spacing-44": {
            "$value": "176px",
            "$type": "spacing",
            "$description": "p-44, m-44, ..."
        },
        "spacing-48": {
            "$value": "192px",
            "$type": "spacing",
            "$description": "p-48, m-48, ..."
        },
        "spacing-52": {
            "$value": "208px",
            "$type": "spacing",
            "$description": "p-52, m-52, ..."
        },
        "spacing-56": {
            "$value": "224px",
            "$type": "spacing",
            "$description": "p-56, m-56, ..."
        },
        "spacing-60": {
            "$value": "240px",
            "$type": "spacing",
            "$description": "p-60, m-60, ..."
        },
        "spacing-64": {
            "$value": "256px",
            "$type": "spacing",
            "$description": "p-64, m-64, ..."
        },
        "spacing-72": {
            "$value": "288px",
            "$type": "spacing",
            "$description": "p-72, m-72, ..."
        },
        "spacing-80": {
            "$value": "320px",
            "$type": "spacing",
            "$description": "p-80, m-80, ..."
        },
        "spacing-96": {
            "$value": "384px",
            "$type": "spacing",
            "$description": "p-96, m-96, ..."
        },
        "breakpoint-sm": {
            "$value": "640px",
            "$type": "dimension",
            "$description": "Position, width, height, radius, or thickness"
        },
        "breakpoint-md": {
            "$value": "768px",
            "$type": "dimension",
            "$description": "Position, width, height, radius, or thickness"
        },
        "breakpoint-lg": {
            "$value": "1024px",
            "$type": "dimension",
            "$description": "Position, width, height, radius, or thickness"
        },
        "breakpoint-xl": {
            "$value": "1280px",
            "$type": "dimension",
            "$description": "Position, width, height, radius, or thickness"
        },
        "breakpoint-2xl": {
            "$value": "1536px",
            "$type": "dimension",
            "$description": "Position, width, height, radius, or thickness"
        },
        "container-3xs": {
            "$value": "256px",
            "$type": "dimension",
            "$description": "Constrain width of content to a standard size"
        },
        "container-2xs": {
            "$value": "288px",
            "$type": "dimension",
            "$description": "Constrain width of content to a standard size"
        },
        "container-xs": {
            "$value": "320px",
            "$type": "dimension",
            "$description": "Constrain width of content to a standard size"
        },
        "container-sm": {
            "$value": "384px",
            "$type": "dimension",
            "$description": "Constrain width of content to a standard size"
        },
        "container-md": {
            "$value": "448px",
            "$type": "dimension",
            "$description": "Constrain width of content to a standard size"
        },
        "container-lg": {
            "$value": "512px",
            "$type": "dimension",
            "$description": "Constrain width of content to a standard size"
        },
        "container-xl": {
            "$value": "576px",
            "$type": "dimension",
            "$description": "Constrain width of content to a standard size"
        },
        "container-2xl": {
            "$value": "672px",
            "$type": "dimension",
            "$description": "Constrain width of content to a standard size"
        },
        "container-3xl": {
            "$value": "768px",
            "$type": "dimension",
            "$description": "Constrain width of content to a standard size"
        },
        "container-4xl": {
            "$value": "896px",
            "$type": "dimension",
            "$description": "Constrain width of content to a standard size"
        },
        "container-5xl": {
            "$value": "1024px",
            "$type": "dimension",
            "$description": "Constrain width of content to a standard size"
        },
        "container-6xl": {
            "$value": "1152px",
            "$type": "dimension",
            "$description": "Constrain width of content to a standard size"
        },
        "container-7xl": {
            "$value": "1280px",
            "$type": "dimension",
            "$description": "Constrain width of content to a standard size"
        },
        "text-xs": {
            "$value": "12px",
            "$type": "fontSizes",
            "$description": ""
        },
        "text-sm": {
            "$value": "14px",
            "$type": "fontSizes",
            "$description": ""
        },
        "text-base": {
            "$value": "16px",
            "$type": "fontSizes",
            "$description": ""
        },
        "text-lg": {
            "$value": "18px",
            "$type": "fontSizes",
            "$description": ""
        },
        "text-xl": {
            "$value": "20px",
            "$type": "fontSizes",
            "$description": ""
        },
        "text-2xl": {
            "$value": "24px",
            "$type": "fontSizes",
            "$description": ""
        },
        "text-3xl": {
            "$value": "30px",
            "$type": "fontSizes",
            "$description": ""
        },
        "text-4xl": {
            "$value": "36px",
            "$type": "fontSizes",
            "$description": ""
        },
        "text-5xl": {
            "$value": "48px",
            "$type": "fontSizes",
            "$description": ""
        },
        "text-6xl": {
            "$value": "60px",
            "$type": "fontSizes",
            "$description": ""
        },
        "text-7xl": {
            "$value": "72px",
            "$type": "fontSizes",
            "$description": ""
        },
        "text-8xl": {
            "$value": "96px",
            "$type": "fontSizes",
            "$description": ""
        },
        "text-9xl": {
            "$value": "128px",
            "$type": "fontSizes",
            "$description": ""
        },
        "text-xs--line-height": {
            "$value": "1 / 0.75",
            "$type": "dimension",
            "$description": ""
        },
        "text-sm--line-height": {
            "$value": "1.25 / 0.875",
            "$type": "dimension",
            "$description": ""
        },
        "text-base--line-height": {
            "$value": "1.5 / 1",
            "$type": "dimension",
            "$description": ""
        },
        "text-lg--line-height": {
            "$value": "1.75 / 1.125",
            "$type": "dimension",
            "$description": ""
        },
        "text-xl--line-height": {
            "$value": "1.75 / 1.25",
            "$type": "dimension",
            "$description": ""
        },
        "text-2xl--line-height": {
            "$value": "2 / 1.5",
            "$type": "dimension",
            "$description": ""
        },
        "text-3xl--line-height": {
            "$value": "2.25 / 1.875",
            "$type": "dimension",
            "$description": ""
        },
        "text-4xl--line-height": {
            "$value": "2.5 / 2.25",
            "$type": "dimension",
            "$description": ""
        },
        "text-5xl--line-height": {
            "$value": "1",
            "$type": "dimension",
            "$description": ""
        },
        "text-6xl--line-height": {
            "$value": "1",
            "$type": "dimension",
            "$description": ""
        },
        "text-7xl--line-height": {
            "$value": "1",
            "$type": "dimension",
            "$description": ""
        },
        "text-8xl--line-height": {
            "$value": "1",
            "$type": "dimension",
            "$description": ""
        },
        "text-9xl--line-height": {
            "$value": "1",
            "$type": "dimension",
            "$description": ""
        },
        "font-weight-thin": {
            "$value": "100",
            "$type": "fontWeights",
            "$description": ""
        },
        "font-weight-extralight": {
            "$value": "200",
            "$type": "fontWeights",
            "$description": ""
        },
        "font-weight-light": {
            "$value": "300",
            "$type": "fontWeights",
            "$description": ""
        },
        "font-weight-normal": {
            "$value": "400",
            "$type": "fontWeights",
            "$description": ""
        },
        "font-weight-medium": {
            "$value": "500",
            "$type": "fontWeights",
            "$description": ""
        },
        "font-weight-semibold": {
            "$value": "600",
            "$type": "fontWeights",
            "$description": ""
        },
        "font-weight-bold": {
            "$value": "700",
            "$type": "fontWeights",
            "$description": ""
        },
        "font-weight-extrabold": {
            "$value": "800",
            "$type": "fontWeights",
            "$description": ""
        },
        "font-weight-black": {
            "$value": "900",
            "$type": "fontWeights",
            "$description": ""
        },
        "radius-xs": {
            "$value": "2px",
            "$type": "borderRadius",
            "$description": ""
        },
        "radius-sm": {
            "$value": "4px",
            "$type": "borderRadius",
            "$description": ""
        },
        "radius-md": {
            "$value": "6px",
            "$type": "borderRadius",
            "$description": ""
        },
        "radius-lg": {
            "$value": "8px",
            "$type": "borderRadius",
            "$description": ""
        },
        "radius-xl": {
            "$value": "12px",
            "$type": "borderRadius",
            "$description": ""
        },
        "radius-2xl": {
            "$value": "16px",
            "$type": "borderRadius",
            "$description": ""
        },
        "radius-3xl": {
            "$value": "24px",
            "$type": "borderRadius",
            "$description": ""
        },
        "radius-4xl": {
            "$value": "32px",
            "$type": "borderRadius",
            "$description": ""
        },
        "blur-xs": {
            "$value": "4px",
            "$type": "dimension",
            "$description": ""
        },
        "blur-sm": {
            "$value": "8px",
            "$type": "dimension",
            "$description": ""
        },
        "blur-md": {
            "$value": "12px",
            "$type": "dimension",
            "$description": ""
        },
        "blur-lg": {
            "$value": "16px",
            "$type": "dimension",
            "$description": ""
        },
        "blur-xl": {
            "$value": "24px",
            "$type": "dimension",
            "$description": ""
        },
        "blur-2xl": {
            "$value": "40px",
            "$type": "dimension",
            "$description": ""
        },
        "blur-3xl": {
            "$value": "64px",
            "$type": "dimension",
            "$description": ""
        },
        "perspective-dramatic": {
            "$value": "100px",
            "$type": "dimension",
            "$description": ""
        },
        "perspective-near": {
            "$value": "300px",
            "$type": "dimension",
            "$description": ""
        },
        "perspective-normal": {
            "$value": "500px",
            "$type": "dimension",
            "$description": ""
        },
        "perspective-midrange": {
            "$value": "800px",
            "$type": "dimension",
            "$description": ""
        },
        "perspective-distant": {
            "$value": "1200px",
            "$type": "dimension",
            "$description": ""
        }
    },
    "$themes": [],
    "$metadata": {
        "tokenSetOrder": [
            "tailwind-defaults"
        ],
        "activeThemes": [],
        "activeSets": []
    }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment