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"]
}
}
@FlxRobole
Copy link

FlxRobole commented Jul 15, 2025 •
edited
Loading

Hi @Squix thank you for providing this awesome configuration file :) I noted that the colour tokens were incomplete and wrote a small script that transforms the tailwind colors into penpot json format. Hope this helps anybody.

"slate-50": {
    "$value": "#f8fafc",
    "$type": "color",
    "$description": ""
  },
  "slate-100": {
    "$value": "#f1f5f9",
    "$type": "color",
    "$description": ""
  },
  "slate-200": {
    "$value": "#e2e8f0",
    "$type": "color",
    "$description": ""
  },
  "slate-300": {
    "$value": "#cbd5e1",
    "$type": "color",
    "$description": ""
  },
  "slate-400": {
    "$value": "#94a3b8",
    "$type": "color",
    "$description": ""
  },
  "slate-500": {
    "$value": "#64748b",
    "$type": "color",
    "$description": ""
  },
  "slate-600": {
    "$value": "#475569",
    "$type": "color",
    "$description": ""
  },
  "slate-700": {
    "$value": "#334155",
    "$type": "color",
    "$description": ""
  },
  "slate-800": {
    "$value": "#1e293b",
    "$type": "color",
    "$description": ""
  },
  "slate-900": {
    "$value": "#0f172a",
    "$type": "color",
    "$description": ""
  },
  "gray-50": {
    "$value": "#f9fafb",
    "$type": "color",
    "$description": ""
  },
  "gray-100": {
    "$value": "#f3f4f6",
    "$type": "color",
    "$description": ""
  },
  "gray-200": {
    "$value": "#e5e7eb",
    "$type": "color",
    "$description": ""
  },
  "gray-300": {
    "$value": "#d1d5db",
    "$type": "color",
    "$description": ""
  },
  "gray-400": {
    "$value": "#9ca3af",
    "$type": "color",
    "$description": ""
  },
  "gray-500": {
    "$value": "#6b7280",
    "$type": "color",
    "$description": ""
  },
  "gray-600": {
    "$value": "#4b5563",
    "$type": "color",
    "$description": ""
  },
  "gray-700": {
    "$value": "#374151",
    "$type": "color",
    "$description": ""
  },
  "gray-800": {
    "$value": "#1f2937",
    "$type": "color",
    "$description": ""
  },
  "gray-900": {
    "$value": "#111827",
    "$type": "color",
    "$description": ""
  },
  "zinc-50": {
    "$value": "#fafafa",
    "$type": "color",
    "$description": ""
  },
  "zinc-100": {
    "$value": "#f4f4f5",
    "$type": "color",
    "$description": ""
  },
  "zinc-200": {
    "$value": "#e4e4e7",
    "$type": "color",
    "$description": ""
  },
  "zinc-300": {
    "$value": "#d4d4d8",
    "$type": "color",
    "$description": ""
  },
  "zinc-400": {
    "$value": "#a1a1aa",
    "$type": "color",
    "$description": ""
  },
  "zinc-500": {
    "$value": "#71717a",
    "$type": "color",
    "$description": ""
  },
  "zinc-600": {
    "$value": "#52525b",
    "$type": "color",
    "$description": ""
  },
  "zinc-700": {
    "$value": "#3f3f46",
    "$type": "color",
    "$description": ""
  },
  "zinc-800": {
    "$value": "#27272a",
    "$type": "color",
    "$description": ""
  },
  "zinc-900": {
    "$value": "#18181b",
    "$type": "color",
    "$description": ""
  },
  "neutral-50": {
    "$value": "#fafafa",
    "$type": "color",
    "$description": ""
  },
  "neutral-100": {
    "$value": "#f5f5f5",
    "$type": "color",
    "$description": ""
  },
  "neutral-200": {
    "$value": "#e5e5e5",
    "$type": "color",
    "$description": ""
  },
  "neutral-300": {
    "$value": "#d4d4d4",
    "$type": "color",
    "$description": ""
  },
  "neutral-400": {
    "$value": "#a3a3a3",
    "$type": "color",
    "$description": ""
  },
  "neutral-500": {
    "$value": "#737373",
    "$type": "color",
    "$description": ""
  },
  "neutral-600": {
    "$value": "#525252",
    "$type": "color",
    "$description": ""
  },
  "neutral-700": {
    "$value": "#404040",
    "$type": "color",
    "$description": ""
  },
  "neutral-800": {
    "$value": "#262626",
    "$type": "color",
    "$description": ""
  },
  "neutral-900": {
    "$value": "#171717",
    "$type": "color",
    "$description": ""
  },
  "stone-50": {
    "$value": "#fafaf9",
    "$type": "color",
    "$description": ""
  },
  "stone-100": {
    "$value": "#f5f5f4",
    "$type": "color",
    "$description": ""
  },
  "stone-200": {
    "$value": "#e7e5e4",
    "$type": "color",
    "$description": ""
  },
  "stone-300": {
    "$value": "#d6d3d1",
    "$type": "color",
    "$description": ""
  },
  "stone-400": {
    "$value": "#a8a29e",
    "$type": "color",
    "$description": ""
  },
  "stone-500": {
    "$value": "#78716c",
    "$type": "color",
    "$description": ""
  },
  "stone-600": {
    "$value": "#57534e",
    "$type": "color",
    "$description": ""
  },
  "stone-700": {
    "$value": "#44403c",
    "$type": "color",
    "$description": ""
  },
  "stone-800": {
    "$value": "#292524",
    "$type": "color",
    "$description": ""
  },
  "stone-900": {
    "$value": "#1c1917",
    "$type": "color",
    "$description": ""
  },
  "red-50": {
    "$value": "#fef2f2",
    "$type": "color",
    "$description": ""
  },
  "red-100": {
    "$value": "#fee2e2",
    "$type": "color",
    "$description": ""
  },
  "red-200": {
    "$value": "#fecaca",
    "$type": "color",
    "$description": ""
  },
  "red-300": {
    "$value": "#fca5a5",
    "$type": "color",
    "$description": ""
  },
  "red-400": {
    "$value": "#f87171",
    "$type": "color",
    "$description": ""
  },
  "red-500": {
    "$value": "#ef4444",
    "$type": "color",
    "$description": ""
  },
  "red-600": {
    "$value": "#dc2626",
    "$type": "color",
    "$description": ""
  },
  "red-700": {
    "$value": "#b91c1c",
    "$type": "color",
    "$description": ""
  },
  "red-800": {
    "$value": "#991b1b",
    "$type": "color",
    "$description": ""
  },
  "red-900": {
    "$value": "#7f1d1d",
    "$type": "color",
    "$description": ""
  },
  "orange-50": {
    "$value": "#fff7ed",
    "$type": "color",
    "$description": ""
  },
  "orange-100": {
    "$value": "#ffedd5",
    "$type": "color",
    "$description": ""
  },
  "orange-200": {
    "$value": "#fed7aa",
    "$type": "color",
    "$description": ""
  },
  "orange-300": {
    "$value": "#fdba74",
    "$type": "color",
    "$description": ""
  },
  "orange-400": {
    "$value": "#fb923c",
    "$type": "color",
    "$description": ""
  },
  "orange-500": {
    "$value": "#f97316",
    "$type": "color",
    "$description": ""
  },
  "orange-600": {
    "$value": "#ea580c",
    "$type": "color",
    "$description": ""
  },
  "orange-700": {
    "$value": "#c2410c",
    "$type": "color",
    "$description": ""
  },
  "orange-800": {
    "$value": "#9a3412",
    "$type": "color",
    "$description": ""
  },
  "orange-900": {
    "$value": "#7c2d12",
    "$type": "color",
    "$description": ""
  },
  "amber-50": {
    "$value": "#fffbeb",
    "$type": "color",
    "$description": ""
  },
  "amber-100": {
    "$value": "#fef3c7",
    "$type": "color",
    "$description": ""
  },
  "amber-200": {
    "$value": "#fde68a",
    "$type": "color",
    "$description": ""
  },
  "amber-300": {
    "$value": "#fcd34d",
    "$type": "color",
    "$description": ""
  },
  "amber-400": {
    "$value": "#fbbf24",
    "$type": "color",
    "$description": ""
  },
  "amber-500": {
    "$value": "#f59e0b",
    "$type": "color",
    "$description": ""
  },
  "amber-600": {
    "$value": "#d97706",
    "$type": "color",
    "$description": ""
  },
  "amber-700": {
    "$value": "#b45309",
    "$type": "color",
    "$description": ""
  },
  "amber-800": {
    "$value": "#92400e",
    "$type": "color",
    "$description": ""
  },
  "amber-900": {
    "$value": "#78350f",
    "$type": "color",
    "$description": ""
  },
  "yellow-50": {
    "$value": "#fefce8",
    "$type": "color",
    "$description": ""
  },
  "yellow-100": {
    "$value": "#fef9c3",
    "$type": "color",
    "$description": ""
  },
  "yellow-200": {
    "$value": "#fef08a",
    "$type": "color",
    "$description": ""
  },
  "yellow-300": {
    "$value": "#fde047",
    "$type": "color",
    "$description": ""
  },
  "yellow-400": {
    "$value": "#facc15",
    "$type": "color",
    "$description": ""
  },
  "yellow-500": {
    "$value": "#eab308",
    "$type": "color",
    "$description": ""
  },
  "yellow-600": {
    "$value": "#ca8a04",
    "$type": "color",
    "$description": ""
  },
  "yellow-700": {
    "$value": "#a16207",
    "$type": "color",
    "$description": ""
  },
  "yellow-800": {
    "$value": "#854d0e",
    "$type": "color",
    "$description": ""
  },
  "yellow-900": {
    "$value": "#713f12",
    "$type": "color",
    "$description": ""
  },
  "lime-50": {
    "$value": "#f7fee7",
    "$type": "color",
    "$description": ""
  },
  "lime-100": {
    "$value": "#ecfccb",
    "$type": "color",
    "$description": ""
  },
  "lime-200": {
    "$value": "#d9f99d",
    "$type": "color",
    "$description": ""
  },
  "lime-300": {
    "$value": "#bef264",
    "$type": "color",
    "$description": ""
  },
  "lime-400": {
    "$value": "#a3e635",
    "$type": "color",
    "$description": ""
  },
  "lime-500": {
    "$value": "#84cc16",
    "$type": "color",
    "$description": ""
  },
  "lime-600": {
    "$value": "#65a30d",
    "$type": "color",
    "$description": ""
  },
  "lime-700": {
    "$value": "#4d7c0f",
    "$type": "color",
    "$description": ""
  },
  "lime-800": {
    "$value": "#3f6212",
    "$type": "color",
    "$description": ""
  },
  "lime-900": {
    "$value": "#365314",
    "$type": "color",
    "$description": ""
  },
  "green-50": {
    "$value": "#f0fdf4",
    "$type": "color",
    "$description": ""
  },
  "green-100": {
    "$value": "#dcfce7",
    "$type": "color",
    "$description": ""
  },
  "green-200": {
    "$value": "#bbf7d0",
    "$type": "color",
    "$description": ""
  },
  "green-300": {
    "$value": "#86efac",
    "$type": "color",
    "$description": ""
  },
  "green-400": {
    "$value": "#4ade80",
    "$type": "color",
    "$description": ""
  },
  "green-500": {
    "$value": "#22c55e",
    "$type": "color",
    "$description": ""
  },
  "green-600": {
    "$value": "#16a34a",
    "$type": "color",
    "$description": ""
  },
  "green-700": {
    "$value": "#15803d",
    "$type": "color",
    "$description": ""
  },
  "green-800": {
    "$value": "#166534",
    "$type": "color",
    "$description": ""
  },
  "green-900": {
    "$value": "#14532d",
    "$type": "color",
    "$description": ""
  },
  "emerald-50": {
    "$value": "#ecfdf5",
    "$type": "color",
    "$description": ""
  },
  "emerald-100": {
    "$value": "#d1fae5",
    "$type": "color",
    "$description": ""
  },
  "emerald-200": {
    "$value": "#a7f3d0",
    "$type": "color",
    "$description": ""
  },
  "emerald-300": {
    "$value": "#6ee7b7",
    "$type": "color",
    "$description": ""
  },
  "emerald-400": {
    "$value": "#34d399",
    "$type": "color",
    "$description": ""
  },
  "emerald-500": {
    "$value": "#10b981",
    "$type": "color",
    "$description": ""
  },
  "emerald-600": {
    "$value": "#059669",
    "$type": "color",
    "$description": ""
  },
  "emerald-700": {
    "$value": "#047857",
    "$type": "color",
    "$description": ""
  },
  "emerald-800": {
    "$value": "#065f46",
    "$type": "color",
    "$description": ""
  },
  "emerald-900": {
    "$value": "#064e3b",
    "$type": "color",
    "$description": ""
  },
  "teal-50": {
    "$value": "#f0fdfa",
    "$type": "color",
    "$description": ""
  },
  "teal-100": {
    "$value": "#ccfbf1",
    "$type": "color",
    "$description": ""
  },
  "teal-200": {
    "$value": "#99f6e4",
    "$type": "color",
    "$description": ""
  },
  "teal-300": {
    "$value": "#5eead4",
    "$type": "color",
    "$description": ""
  },
  "teal-400": {
    "$value": "#2dd4bf",
    "$type": "color",
    "$description": ""
  },
  "teal-500": {
    "$value": "#14b8a6",
    "$type": "color",
    "$description": ""
  },
  "teal-600": {
    "$value": "#0d9488",
    "$type": "color",
    "$description": ""
  },
  "teal-700": {
    "$value": "#0f766e",
    "$type": "color",
    "$description": ""
  },
  "teal-800": {
    "$value": "#115e59",
    "$type": "color",
    "$description": ""
  },
  "teal-900": {
    "$value": "#134e4a",
    "$type": "color",
    "$description": ""
  },
  "cyan-50": {
    "$value": "#ecfeff",
    "$type": "color",
    "$description": ""
  },
  "cyan-100": {
    "$value": "#cffafe",
    "$type": "color",
    "$description": ""
  },
  "cyan-200": {
    "$value": "#a5f3fc",
    "$type": "color",
    "$description": ""
  },
  "cyan-300": {
    "$value": "#67e8f9",
    "$type": "color",
    "$description": ""
  },
  "cyan-400": {
    "$value": "#22d3ee",
    "$type": "color",
    "$description": ""
  },
  "cyan-500": {
    "$value": "#06b6d4",
    "$type": "color",
    "$description": ""
  },
  "cyan-600": {
    "$value": "#0891b2",
    "$type": "color",
    "$description": ""
  },
  "cyan-700": {
    "$value": "#0e7490",
    "$type": "color",
    "$description": ""
  },
  "cyan-800": {
    "$value": "#155e75",
    "$type": "color",
    "$description": ""
  },
  "cyan-900": {
    "$value": "#164e63",
    "$type": "color",
    "$description": ""
  },
  "sky-50": {
    "$value": "#f0f9ff",
    "$type": "color",
    "$description": ""
  },
  "sky-100": {
    "$value": "#e0f2fe",
    "$type": "color",
    "$description": ""
  },
  "sky-200": {
    "$value": "#bae6fd",
    "$type": "color",
    "$description": ""
  },
  "sky-300": {
    "$value": "#7dd3fc",
    "$type": "color",
    "$description": ""
  },
  "sky-400": {
    "$value": "#38bdf8",
    "$type": "color",
    "$description": ""
  },
  "sky-500": {
    "$value": "#0ea5e9",
    "$type": "color",
    "$description": ""
  },
  "sky-600": {
    "$value": "#0284c7",
    "$type": "color",
    "$description": ""
  },
  "sky-700": {
    "$value": "#0369a1",
    "$type": "color",
    "$description": ""
  },
  "sky-800": {
    "$value": "#075985",
    "$type": "color",
    "$description": ""
  },
  "sky-900": {
    "$value": "#0c4a6e",
    "$type": "color",
    "$description": ""
  },
  "blue-50": {
    "$value": "#eff6ff",
    "$type": "color",
    "$description": ""
  },
  "blue-100": {
    "$value": "#dbeafe",
    "$type": "color",
    "$description": ""
  },
  "blue-200": {
    "$value": "#bfdbfe",
    "$type": "color",
    "$description": ""
  },
  "blue-300": {
    "$value": "#93c5fd",
    "$type": "color",
    "$description": ""
  },
  "blue-400": {
    "$value": "#60a5fa",
    "$type": "color",
    "$description": ""
  },
  "blue-500": {
    "$value": "#3b82f6",
    "$type": "color",
    "$description": ""
  },
  "blue-600": {
    "$value": "#2563eb",
    "$type": "color",
    "$description": ""
  },
  "blue-700": {
    "$value": "#1d4ed8",
    "$type": "color",
    "$description": ""
  },
  "blue-800": {
    "$value": "#1e40af",
    "$type": "color",
    "$description": ""
  },
  "blue-900": {
    "$value": "#1e3a8a",
    "$type": "color",
    "$description": ""
  },
  "indigo-50": {
    "$value": "#eef2ff",
    "$type": "color",
    "$description": ""
  },
  "indigo-100": {
    "$value": "#e0e7ff",
    "$type": "color",
    "$description": ""
  },
  "indigo-200": {
    "$value": "#c7d2fe",
    "$type": "color",
    "$description": ""
  },
  "indigo-300": {
    "$value": "#a5b4fc",
    "$type": "color",
    "$description": ""
  },
  "indigo-400": {
    "$value": "#818cf8",
    "$type": "color",
    "$description": ""
  },
  "indigo-500": {
    "$value": "#6366f1",
    "$type": "color",
    "$description": ""
  },
  "indigo-600": {
    "$value": "#4f46e5",
    "$type": "color",
    "$description": ""
  },
  "indigo-700": {
    "$value": "#4338ca",
    "$type": "color",
    "$description": ""
  },
  "indigo-800": {
    "$value": "#3730a3",
    "$type": "color",
    "$description": ""
  },
  "indigo-900": {
    "$value": "#312e81",
    "$type": "color",
    "$description": ""
  },
  "violet-50": {
    "$value": "#f5f3ff",
    "$type": "color",
    "$description": ""
  },
  "violet-100": {
    "$value": "#ede9fe",
    "$type": "color",
    "$description": ""
  },
  "violet-200": {
    "$value": "#ddd6fe",
    "$type": "color",
    "$description": ""
  },
  "violet-300": {
    "$value": "#c4b5fd",
    "$type": "color",
    "$description": ""
  },
  "violet-400": {
    "$value": "#a78bfa",
    "$type": "color",
    "$description": ""
  },
  "violet-500": {
    "$value": "#8b5cf6",
    "$type": "color",
    "$description": ""
  },
  "violet-600": {
    "$value": "#7c3aed",
    "$type": "color",
    "$description": ""
  },
  "violet-700": {
    "$value": "#6d28d9",
    "$type": "color",
    "$description": ""
  },
  "violet-800": {
    "$value": "#5b21b6",
    "$type": "color",
    "$description": ""
  },
  "violet-900": {
    "$value": "#4c1d95",
    "$type": "color",
    "$description": ""
  },
  "purple-50": {
    "$value": "#faf5ff",
    "$type": "color",
    "$description": ""
  },
  "purple-100": {
    "$value": "#f3e8ff",
    "$type": "color",
    "$description": ""
  },
  "purple-200": {
    "$value": "#e9d5ff",
    "$type": "color",
    "$description": ""
  },
  "purple-300": {
    "$value": "#d8b4fe",
    "$type": "color",
    "$description": ""
  },
  "purple-400": {
    "$value": "#c084fc",
    "$type": "color",
    "$description": ""
  },
  "purple-500": {
    "$value": "#a855f7",
    "$type": "color",
    "$description": ""
  },
  "purple-600": {
    "$value": "#9333ea",
    "$type": "color",
    "$description": ""
  },
  "purple-700": {
    "$value": "#7e22ce",
    "$type": "color",
    "$description": ""
  },
  "purple-800": {
    "$value": "#6b21a8",
    "$type": "color",
    "$description": ""
  },
  "purple-900": {
    "$value": "#581c87",
    "$type": "color",
    "$description": ""
  },
  "fuchsia-50": {
    "$value": "#fdf4ff",
    "$type": "color",
    "$description": ""
  },
  "fuchsia-100": {
    "$value": "#fae8ff",
    "$type": "color",
    "$description": ""
  },
  "fuchsia-200": {
    "$value": "#f5d0fe",
    "$type": "color",
    "$description": ""
  },
  "fuchsia-300": {
    "$value": "#f0abfc",
    "$type": "color",
    "$description": ""
  },
  "fuchsia-400": {
    "$value": "#e879f9",
    "$type": "color",
    "$description": ""
  },
  "fuchsia-500": {
    "$value": "#d946ef",
    "$type": "color",
    "$description": ""
  },
  "fuchsia-600": {
    "$value": "#c026d3",
    "$type": "color",
    "$description": ""
  },
  "fuchsia-700": {
    "$value": "#a21caf",
    "$type": "color",
    "$description": ""
  },
  "fuchsia-800": {
    "$value": "#86198f",
    "$type": "color",
    "$description": ""
  },
  "fuchsia-900": {
    "$value": "#701a75",
    "$type": "color",
    "$description": ""
  },
  "pink-50": {
    "$value": "#fdf2f8",
    "$type": "color",
    "$description": ""
  },
  "pink-100": {
    "$value": "#fce7f3",
    "$type": "color",
    "$description": ""
  },
  "pink-200": {
    "$value": "#fbcfe8",
    "$type": "color",
    "$description": ""
  },
  "pink-300": {
    "$value": "#f9a8d4",
    "$type": "color",
    "$description": ""
  },
  "pink-400": {
    "$value": "#f472b6",
    "$type": "color",
    "$description": ""
  },
  "pink-500": {
    "$value": "#ec4899",
    "$type": "color",
    "$description": ""
  },
  "pink-600": {
    "$value": "#db2777",
    "$type": "color",
    "$description": ""
  },
  "pink-700": {
    "$value": "#be185d",
    "$type": "color",
    "$description": ""
  },
  "pink-800": {
    "$value": "#9d174d",
    "$type": "color",
    "$description": ""
  },
  "pink-900": {
    "$value": "#831843",
    "$type": "color",
    "$description": ""
  },
  "rose-50": {
    "$value": "#fff1f2",
    "$type": "color",
    "$description": ""
  },
  "rose-100": {
    "$value": "#ffe4e6",
    "$type": "color",
    "$description": ""
  },
  "rose-200": {
    "$value": "#fecdd3",
    "$type": "color",
    "$description": ""
  },
  "rose-300": {
    "$value": "#fda4af",
    "$type": "color",
    "$description": ""
  },
  "rose-400": {
    "$value": "#fb7185",
    "$type": "color",
    "$description": ""
  },
  "rose-500": {
    "$value": "#f43f5e",
    "$type": "color",
    "$description": ""
  },
  "rose-600": {
    "$value": "#e11d48",
    "$type": "color",
    "$description": ""
  },
  "rose-700": {
    "$value": "#be123c",
    "$type": "color",
    "$description": ""
  },
  "rose-800": {
    "$value": "#9f1239",
    "$type": "color",
    "$description": ""
  },
  "rose-900": {
    "$value": "#881337",
    "$type": "color",
    "$description": ""
  }

@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