toTailwindExtend.js

const getTailwindExtend = themeUiConfig => {
  const propertyMap = {
    "borderStyles": ["borderStyle"],
    "borderWidths": ["borderWidth"],
    "breakpoints": ["screens"],
    "colors": ["colors"],
    "letterSpacings": ["letterSpacing"],
    "lineHeights": ["lineHeight"],
    "radii": ["borderRadius"],
    "fontWeights": ["fontWeight"],
    "fontSizes": ["fontSize"],
    "shadows": ["boxShadow"],
    "space": ["spacing"],
    "zIndices": ["zIndex"],
    "sizes": [
      "width",
      "minWidth",
      "maxWidth",
      "height",
      "minHeight",
      "maxHeight",
    ],
  }

  return Object.keys(themeUiConfig).reduce((tailwindConfig, themeUiKey) => {
    const additionalTailwindConfig = propertyMap[themeUiKey] &&
      propertyMap[themeUiKey].reduce((acc, tailwindConfigKey) => ({
        ...acc,
        [tailwindConfigKey]: themeUiConfig[themeUiKey],
      }), {})

    return {
      ...tailwindConfig,
      ...(additionalTailwindConfig || {}),
    }
  }, {})
}