Tailwind CSS config for current project

tailwind.config.js

module.exports = {
  theme: {
    screens: {
      sm: '1081px',
      md: '1281px',
      lg: '1441px',
      xl: '1601px',
    },
    colors: {
      'transparent': 'transparent',
      'black': 'hsl(0, 0%, 0%)',
      'grey': 'hsl(0, 0%, 50%)',
      'white': 'hsl(0, 0%, 100%)',
      'l1': 'hsl(0, 0%, 90%)',
      'l2': 'hsl(0, 0%, 80%)',
      'l3': 'hsl(0, 0%, 70%)',
      'l4': 'hsl(0, 0%, 60%)',
      'l5': 'hsl(0, 0%, 50%)',
      'l6': 'hsl(0, 0%, 40%)',
      'l7': 'hsl(0, 0%, 30%)',
      'l8': 'hsl(0, 0%, 20%)',
      'l9': 'hsl(0, 0%, 10%)',
      'soothing-sea': 'hsl(172.1, 46.3%, 83.9%)',
    },
    fontFamily: {
      'futura': 'Futura, Arial, sans-serif',
      'hack': 'Hack, Courier New, monospace',
    },
    borderRadius: {
      'none': '0',
      'sm': '2px',
      default: '3px',
      'lg': '5px',
      'full': '9999px',
    },
    extend: {
      backgroundColor: {
        'semi-10': 'hsla(0, 0%, 0%, 0.1)',
        'semi-20': 'hsla(0, 0%, 0%, 0.2)',
        'semi-25': 'hsla(0, 0%, 0%, 0.25)',
        'semi-30': 'hsla(0, 0%, 0%, 0.3)',
        'semi-40': 'hsla(0, 0%, 0%, 0.4)',
        'semi-50': 'hsla(0, 0%, 0%, 0.5)',
        'semi-60': 'hsla(0, 0%, 0%, 0.6)',
        'semi-70': 'hsla(0, 0%, 0%, 0.7)',
        'semi-75': 'hsla(0, 0%, 0%, 0.75)',
        'semi-80': 'hsla(0, 0%, 0%, 0.8)',
        'semi-90': 'hsla(0, 0%, 0%, 0.9)',
      },
      fontSize: {
        '4xs': '.375rem',
        '3xs': '.5rem',
        '2xs': '.625rem',
      },
      height: {
        'gr-small': '38.46154%',
        'gr-large': '61.53846%',
      },
      letterSpacing: {
        'condensed': '-.15em',
        'tightest': '-.1em',
        'extended': '.15em',
      },
      spacing: {
        '0.5': '.125rem',
        '7': '1.75rem',
      },
      width: {
        'gr-small': '38.46154%',
        'gr-large': '61.53846%',
      }
    }
  },
  variants: {
    backgroundRepeat: [],
    cursor: [],
    fontSmoothing: [],
    listStylePosition: [],
    listStyleType: [],
    whitespace: [],
    wordBreak: [],
  },
  corePlugins: {
    appearance: false,
    borderCollapse: false,
    fill: false,
    stroke: false,
    verticalAlign: false,
  },
  plugins: [
    require('@tailwindcss/custom-forms')
  ],
};