Profile My skills Saved Collections Edit profile Submit a skill

Export Tailwind

Export the current design system as a Tailwind CSS configuration. Generates theme.extend with colors, fonts, spacing, shadows, and custom screens.

dragoon0x 8fb718b 731 B Updated
Design & Media

File contents

/export-tailwind — Tailwind Config Export

Generate a tailwind.config.js theme extension:

module.exports = {
  theme: {
    extend: {
      colors: { /* full palette + semantic */ },
      fontFamily: { display: [...], body: [...], mono: [...] },
      fontSize: { /* type scale */ },
      spacing: { /* spacing scale */ },
      boxShadow: { /* elevation system */ },
      borderRadius: { /* radius scale */ },
      screens: { /* breakpoints */ }
    }
  }
}

Include all computed values, not references to other tokens.

dragoon0x/optik/tree/main/source/skills/export-tailwind commit 8fb718b1e2

Browse category

Frequently asked questions

npx skillmds@latest add dragoon0x/export-tailwind