text: const defaultTheme = require('tailwindcss/defaultTheme');
  const colors = require('@tailwindcss/ui/colors');
  const rgba = require('hex-to-rgba');
  
  module.exports = {
  	theme: {
  		extend: {
  			fontFamily: {
  				sans: ['var(--font-family, Inter)', ...defaultTheme.fontFamily.sans]
  			},
  			colors: {
  				primary: {
  					'50': `var(--primary-50, ${colors.blue[50]})`,
  					'100': `var(--primary-100, ${colors.blue[100]})`,
  					'200': `var(--primary-200, ${colors.blue[200]})`,
  					'300': `var(--primary-300, ${colors.blue[300]})`,
  					'400': `var(--primary-400, ${colors.blue[400]})`,
  					'500': `var(--primary-500, ${colors.blue[500]})`,
  					'600': `var(--primary-600, ${colors.blue[600]})`,
  					'700': `var(--primary-700, ${colors.blue[700]})`,
  					'800': `var(--primary-800, ${colors.blue[800]})`,
  					'900': `var(--primary-900, ${colors.blue[900]})`
  				},
  				gray: {
  					'50': `var(--gray-50, ${colors.gray[50]})`,
  					'100': `var(--gray-100, ${colors.gray[100]})`,
  					'200': `var(--gray-200, ${colors.gray[200]})`,
  					'300': `var(--gray-300, ${colors.gray[300]})`,
  					'400': `var(--gray-400, ${colors.gray[400]})`,
  					'500': `var(--gray-500, ${colors.gray[500]})`,
  					'600': `var(--gray-600, ${colors.gray[600]})`,
  					'700': `var(--gray-700, ${colors.gray[700]})`,
  					'800': `var(--gray-800, ${colors.gray[800]})`,
  					'900': `var(--gray-900, ${colors.gray[900]})`
  				},
  				black: '#112B42',
  				code: {
  					green: '#b5f4a5',
  					yellow: '#ffe484',
  					purple: '#d9a9ff',
  					red: '#ff8383',
  					blue: '#93ddfd',
  					white: '#fff'
  				}
  			},
  			borderRadius: {
  				xl: '0.75rem'
  			},
  			maxHeight: {
  				'144': '36rem'
  			},
  			boxShadow: theme => ({
  				'outline-primary': `0 0 0 3px ${rgba(theme('colors.blue.300'), 0.45)}`
  			}),
  			container: {
  				center: true,
  				padding: {
  					default: '1.25rem',
  					sm: '2rem',
  					lg: '3rem',
  					xl: '12rem',
  					xxl: '11rem'
  				}
  			},
  			screens: {
  				xxl: '1440px'
  			}
  		}
  	},
  	variants: {},
  	plugins: [require('@tailwindcss/ui')]
  };
  