tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {
      spacing: {
        'o': 'var(--unit-o)',
        'h': 'var(--unit-h)',
        '1': 'var(--unit-1)',
        '2': 'var(--unit-2)',
        '3': 'var(--unit-3)',
        '4': 'var(--unit-4)',
        '5': 'var(--unit-5)',
        '6': 'var(--unit-6)',
        '7': 'var(--unit-7)',
        '8': 'var(--unit-8)',
        '9': 'var(--unit-9)',
        '10': 'var(--unit-10)',
        '11': 'var(--unit-11)',
        '12': 'var(--unit-12)',
        '13': 'var(--unit-13)',
        '14': 'var(--unit-14)',
        'xxxxs': 'var(--xxxxs)',
        'xxxs': 'var(--xxxs)',
        'xxs': 'var(--xxs)',
        'xs': 'var(--xs)',
        's': 'var(--s)',
        'ssm': 'var(--ssm)',
        'sm': 'var(--sm)',
        'smm': 'var(--smm)',
        'mss': 'var(--mss)',
        'ms': 'var(--ms)',
        'mms': 'var(--mms)',
        'mmms': 'var(--mmms)',
        'm': 'var(--m)',
        'ml': 'var(--ml)',
        'lm': 'var(--lm)',
        'l': 'var(--l)',
        'xl': 'var(--xl)',
        'xxl': 'var(--xxl)',
        'xxxl': 'var(--xxxl)',
      },
      colors: {
        'blue-black': 'var(--blue-black)',
        'darker-blue': 'var(--darker-blue)',
        'dark-blue': 'var(--dark-blue)',
        'royal-blue': 'var(--royal-blue)',
        'electric-blue': 'var(--electric-blue)',
        'blue': 'var(--blue)',
        'light-blue': 'var(--light-blue)',
        'primary': 'var(--primary)',
        'secondary': 'var(--secondary)',
        'tertiary': 'var(--tertiary)',
        'active': 'var(--active)',
        'darker': 'var(--darker)',
        'dark': 'var(--dark)',
        'darker-grey': 'var(--darker-grey)',
        'dark-grey': 'var(--dark-grey)',
        'grey': 'var(--grey)',
        'light-grey': 'var(--light-grey)',
        'lighter-grey': 'var(--lighter-grey)',
        'light': 'var(--light)',
        'lighter': 'var(--lighter)',
        'black': 'var(--black)',
        'white': 'var(--white)',
        'green': 'var(--green)',
        'orange': 'var(--orange)',
        'red': 'var(--red)',
        'yellow': 'var(--yellow)',
        'cyan': 'var(--cyan)',
        'pink': 'var(--pink)',
        'dark-green': 'var(--dark-green)',
        'dark-orange': 'var(--dark-orange)',
        'dark-red': 'var(--dark-red)',
        'light-green': 'var(--light-green)',
        'light-orange': 'var(--light-orange)',
        'light-red': 'var(--light-red)',
        'positive': 'var(--positive)',
        'negative': 'var(--negative)',
        'success': 'var(--success)',
        'failure': 'var(--failure)',
        'error': 'var(--error)',
        'warning': 'var(--warning)',
        'info': 'var(--info)',
        'debug': 'var(--debug)',
      },
    },
  },
  plugins: []
}