Rem based TailwindCSS config

gistfile1.txt

const colors = {
  'current': 'currentColor',
  'transparent': 'transparent',
  'white': '#ffffff',
  'grey-100': '#FBFBFB',
  'grey-200': '#F7F5F6',
  'grey-400': '#ECECEC',
  'grey-500': '#E5E5E5',
  'grey-700': '#C4C4C4',
  'grey-800': '#888888',
  'black': '#000000'
}

const units = {
  base: {
    'none': 'none',
    'auto': 'auto',
    'initial': 'initial',
    'inherit': 'inherit',
    '0': '0',
    'px': '1px',
    'n-px': '-1px',
    'em': '1em',
    'max': '9999999999px',
    'n-max': '-9999999999px',
    'full': '100%',
    'n-full': '-100%'
  },
  viewport: {
    'screen-w': '100vw',
    'n-screen-w': '-100vw',
    'screen-h': '100vh',
    'n-screen-h': '-100vh'
  },
  rem: {
    '0125': '0.125rem',
    'n-0125': '-0.125rem',
    '0250': '0.250rem',
    'n-0250': '-0.250rem',
    '0375': '0.375rem',
    'n-0375': '-0.375rem',
    '0500': '0.500rem',
    'n-0500': '-0.500rem',
    '0625': '0.625rem',
    'n-0625': '-0.625rem',
    '0750': '0.750rem',
    'n-0750': '-0.750rem',
    '0875': '0.875rem',
    'n-0875': '-0.875rem',
    '1000': '1.000rem',
    'n-1000': '-1.000rem',
    '1125': '1.125rem',
    'n-1125': '-1.125rem',
    '1250': '1.250rem',
    'n-1250': '-1.250rem',
    '1375': '1.375rem',
    'n-1375': '-1.375rem',
    '1500': '1.500rem',
    'n-1500': '-1.500rem',
    '1625': '1.625rem',
    'n-1625': '-1.625rem',
    '1750': '1.750rem',
    'n-1750': '-1.750rem',
    '1875': '1.875rem',
    'n-1875': '-1.875rem',
    '2000': '2.000rem',
    'n-2000': '-2.000rem',
    '2125': '2.125rem',
    'n-2125': '-2.125rem',
    '2250': '2.250rem',
    'n-2250': '-2.250rem',
    '2375': '2.375rem',
    'n-2375': '-2.375rem',
    '2500': '2.500rem',
    'n-2500': '-2.500rem',
    '2625': '2.625rem',
    'n-2625': '-2.625rem',
    '2750': '2.750rem',
    'n-2750': '-2.750rem',
    '2875': '2.875rem',
    'n-2875': '-2.875rem',
    '3000': '3.000rem',
    'n-3000': '-3.000rem',
    '3125': '3.125rem',
    'n-3125': '-3.125rem',
    '3250': '3.250rem',
    'n-3250': '-3.250rem',
    '3375': '3.375rem',
    'n-3375': '-3.375rem',
    '3500': '3.500rem',
    'n-3500': '-3.500rem',
    '3625': '3.625rem',
    'n-3625': '-3.625rem',
    '3750': '3.750rem',
    'n-3750': '-3.750rem',
    '3875': '3.875rem',
    'n-3875': '-3.875rem',
    '4000': '4.000rem',
    'n-4000': '-4.000rem',
    '4125': '4.125rem',
    'n-4125': '-4.125rem',
    '4250': '4.250rem',
    'n-4250': '-4.250rem',
    '4375': '4.375rem',
    'n-4375': '-4.375rem',
    '4500': '4.500rem',
    'n-4500': '-4.500rem',
    '4625': '4.625rem',
    'n-4625': '-4.625rem',
    '4750': '4.750rem',
    'n-4750': '-4.750rem',
    '4875': '4.875rem',
    'n-4875': '-4.875rem',
    '5000': '5.000rem',
    'n-5000': '-5.000rem',
    '6000': '6.000rem',
    'n-6000': '-6.000rem',
    '7000': '7.000rem',
    'n-7000': '-7.000rem',
    '8000': '8.000rem',
    'n-8000': '-8.000rem',
    '9000': '9.000rem',
    'n-9000': '-9.000rem'
  },
  pixels: {
    '0125': '2px',
    'n-0125': '-2px',
    '0250': '4px',
    'n-0250': '-4px',
    '0375': '6px',
    'n-0375': '-6px',
    '0500': '8px',
    'n-0500': '-8px',
    '0625': '10px',
    'n-0625': '-10px',
    '0687': '11px',
    'n-0687': '-11px',
    '0750': '12px',
    'n-0750': '-12px',
    '0875': '14px',
    'n-0875': '-14px',
    '1000': '16px',
    'n-1000': '-16px',
    '1125': '18px',
    'n-1125': '-18px',
    '1250': '20px',
    'n-1250': '-20px',
    '1375': '22px',
    'n-1375': '-22px',
    '1500': '24px',
    'n-1500': '-24px',
    '1625': '26px',
    'n-1625': '-26px',
    '1750': '28px',
    'n-1750': '-28px',
    '2000': '32px',
    'n-2000': '-32px',
    '2125': '34px',
    'n-2125': '-34px',
    '2250': '36px',
    'n-2250': '-36px',
    '2375': '38px',
    'n-2375': '-38px',
    '2500': '40px',
    'n-2500': '-40px',
    '2625': '42px',
    'n-2625': '-42px',
    '2750': '44px',
    'n-2750': '-44px',
    '3000': '48px',
    'n-3000': '-48px',
    '3125': '50px',
    'n-3125': '-50px',
    '3250': '52px',
    'n-3250': '-52px',
    '3375': '54px',
    'n-3375': '-54px',
    '3500': '56px',
    'n-3500': '-56px',
    '3625': '58px',
    'n-3625': '-58px',
    '3750': '60px',
    'n-3750': '-60px',
    '4000': '64px',
    'n-4000': '-64px',
    '5000': '62px',
    'n-5000': '-62px',
    '8000': '128px',
    'n-8000': '-128px'
  },
  percentage: {
    '1/12': '8.33333%',
    'n-1/12': '-8.33333%',
    '1/10': '10%',
    'n-1/10': '-10%',
    '2/12': '16.66666%',
    'n-2/12': '-16.66666%',
    '2/10': '20%',
    'n-2/10': '-20%',
    '3/12': '24.99999%',
    'n-3/12': '-24.99999%',
    '3/10': '30%',
    'n-3/10': '-30%',
    '4/12': '33.33333%',
    'n-4/12': '-33.33333%',
    '4/10': '40%',
    'n-4/10': '-40%',
    '5/12': '41.66666%',
    'n-5/12': '-41.66666%',
    '6/12': '50%',
    'n-6/12': '-50%',
    '7/12': '58.33333%',
    'n-7/12': '-58.33333%',
    '6/10': '60%',
    'n-6/10': '-60%',
    '8/12': '66.66666%',
    'n-8/12': '-66.66666%',
    '7/10': '70%',
    'n-7/10': '-70%',
    '9/12': '74.99999%',
    'n-9/12': '-74.99999%',
    '8/10': '80%',
    'n-8/10': '-80%',
    '10/12': '83.33333%',
    'n-10/12': '-83.33333%',
    '6/7': '85.71428%',
    'n-6/7': '-85.71428%',
    '9/10': '90%',
    'n-9/10': '-90%',
    '11/12': '91.66666%',
    'n-11/12': '-91.66666%',
  },
  screens: {
    'xs3': '280px',
    'xs2': '320px',
    'xs': '420px',
    'sm': '570px',
    'md': '768px',
    'mmd': '892px',
    'lg': '992px',
    'lg2': '1140px',
    'xl': '1280px',
    'xl2': '1440px',
    'xl3': '1600px'
  },
  timings: {
    '0': '0',
    '0125': '0125ms',
    '0250': '0250ms',
    '0375': '0375ms',
    '0500': '0500ms',
    '0625': '0625ms',
    '0750': '0750ms',
    '0875': '0875ms',
    '1000': '1000ms',
    '1125': '1125ms',
    '1250': '1250ms',
    '1375': '1375ms',
    '1500': '1500ms',
    '1625': '1625ms',
    '1750': '1750ms',
    '1875': '1875ms',
    '2000': '2000ms',
    '2250': '2250ms',
    '2500': '2500ms',
    '2750': '2750ms',
    '3000': '3000ms',
    '3250': '3250ms',
    '3500': '3500ms',
    '3750': '3750ms',
    '4000': '4000ms'
  }
}

const allUnits = {
  ...units.base,
  ...units.rem,
  ...units.viewport,
  ...units.percentage,
  ...units.screens
}

// tailwind config
module.exports = {
  theme: {
    inset: allUnits,
    colors: colors,
    margin: allUnits,
    padding: allUnits,
    screens: units.screens,
    spacing: allUnits,
    maxWidth: allUnits,
    minWidth: allUnits,
    maxHeight: allUnits,
    minHeight: allUnits,
    zIndex: {
      'auto': 'auto',
      '0': '0',
      'n-0': '-0',
      '5': '5',
      'n-5': '-5',
      '10': '10',
      'n-10': '-10',
      '20': '20',
      'n-20': '-20',
      '30': '30',
      'n-30': '-30',
      '40': '40',
      'n-40': '-40',
      '50': '50',
      'n-50': '-50',
      '60': '60',
      'n-60': '-60',
      '70': '70',
      'n-70': '-70',
      '80': '80',
      'n-80': '-80',
      '90': '90',
      'n-90': '-90',
      '100': '100',
      '110': '110',
      '120': '120',
      '130': '130',
      '140': '140',
      '150': '150',
      '160': '160',
      '170': '170',
      '180': '180',
      '190': '190',
      '200': '200'
    },
    opacity: {
      '0': '0',
      '05': '.05',
      '10': '.10',
      '15': '.15',
      '20': '.20',
      '25': '.25',
      '30': '.30',
      '35': '.35',
      '40': '.40',
      '45': '.45',
      '50': '.50',
      '55': '.55',
      '60': '.60',
      '65': '.65',
      '70': '.70',
      '75': '.75',
      '80': '.80',
      '85': '.85',
      '90': '.90',
      '95': '.95',
      '100': '1'
    },
    borderRadius: {
      '0': '0',
      ...allUnits
    },
    borderWidth: {
      '0': '0',
      'px': '1px',
      ...units.pixels
    },
    transitionDuration: units.timings,
    transitionDelay: units.timings,
    fontFamily: {
      'brand': 'questrial, sans-serif',
      'serif': 'lato, sans-serif'
    },
    fontSize: {
      '0': '0',
      ...units.pixels,
    },
    fontWeight: {
      '100': 100,
      '200': 200,
      '300': 300,
      '400': 400,
      '500': 500,
      '600': 600,
      '700': 700,
      '800': 800,
      '900': 900
    },
    lineHeight: {
      '0': '0',
      ...units.pixels
    },
    letterSpacing: {
      '0': '0',
      '0062': '0.0625rem',
      'n-0062': '-0.0625rem',
      ...units.pixels
    }
  }
}