tailwindcss/src/defaultConfig.js

export default {
  breakpoints: {
    sm: '576px',
    md: '768px',
    lg: '992px',
    xl: '1200px',
  },
  colors: {
    'black': '#000000',
    'grey-900': '#212b35',
    'grey-800': '#404e5c',
    'grey-700': '#647382',
    'grey-600': '#919eab',
    'grey-500': '#c5ced6',
    'grey-400': '#dfe3e8',
    'grey-300': '#f0f2f5',
    'grey-200': '#f7f9fa',
    'white': '#ffffff',
    'red-dark': '#d43633',
    'red': '#f25451',
    'red-light': '#fa8785',
    'red-lightest': '#fff1f0',
    'orange-dark': '#f29500',
    'orange': '#ffb82b',
    'orange-light': '#ffd685',
    'orange-lightest': '#fff8eb',
    'yellow-dark': '#ffc400',
    'yellow': '#ffe14a',
    'yellow-light': '#ffea83',
    'yellow-lightest': '#fffbe5',
    'green-dark': '#34ae4c',
    'green': '#57d06f',
    'green-light': '#b1f3be',
    'green-lightest': '#eefff1',
    'teal-dark': '#249e9a',
    'teal': '#4dc0b5',
    'teal-light': '#9eebe4',
    'teal-lightest': '#eefffd',
    'blue-dark': '#3687c8',
    'blue': '#4aa2ea',
    'blue-light': '#acdaff',
    'blue-lightest': '#f1f9ff',
    'indigo-dark': '#4957a5',
    'indigo': '#6574cd',
    'indigo-light': '#bcc5fb',
    'indigo-lightest': '#f4f5ff',
    'purple-dark': '#714cb4',
    'purple': '#976ae6',
    'purple-light': '#ceb3ff',
    'purple-lightest': '#f7f3ff',
    'pink-dark': '#d84f7d',
    'pink': '#f66d9b',
    'pink-light': '#ffa5c3',
    'pink-lightest': '#fdf2f5',
  },
  backgroundColors: [
    {
      'light': 'white',
      'light-soft': 'grey-200',
      'light-softer': 'grey-300',
      'light-softest': 'grey-400',
      'dark': 'grey-900',
      'dark-soft': 'grey-800',
      'dark-softer': 'grey-700',
      'dark-softest': 'grey-600',
    },
    'red-dark',
    'red',
    'red-light',
    'red-lightest',
    'orange-dark',
    'orange',
    'orange-light',
    'orange-lightest',
    'yellow-dark',
    'yellow',
    'yellow-light',
    'yellow-lightest',
    'green-dark',
    'green',
    'green-light',
    'green-lightest',
    'teal-dark',
    'teal',
    'teal-light',
    'teal-lightest',
    'blue-dark',
    'blue',
    'blue-light',
    'blue-lightest',
    'indigo-dark',
    'indigo',
    'indigo-light',
    'indigo-lightest',
    'purple-dark',
    'purple',
    'purple-light',
    'purple-lightest',
    'pink-dark',
    'pink',
    'pink-light',
    'pink-lightest',
  ],
  borders: {
    defaults: {
      width: '1px',
      color: 'grey-500',
    },
    widths: {
      '0': '0',
      '2': '2px',
      '4': '4px',
      '8': '8px',
    },
    colors: [
      {
        'light': 'white',
        'light-soft': 'grey-200',
        'light-softer': 'grey-300',
        'dark': 'grey-600',
        'dark-soft': 'grey-500',
        'dark-softer': 'grey-400',
        'light-overlay': 'hsla(0, 0%, 0%, 20%)',
        'light-overlay-soft': 'hsla(0, 0%, 0%, 10%)',
        'light-overlay-softer': 'hsla(0, 0%, 0%, 5%)',
        'dark-overlay': 'hsla(0, 0%, 100%, 100%)',
        'dark-overlay-soft': 'hsla(0, 0%, 100%, 60%)',
        'dark-overlay-softer': 'hsla(0, 0%, 100%, 35%)',
      },
      'red-dark',
      'red',
      'red-light',
      'red-lightest',
      'orange-dark',
      'orange',
      'orange-light',
      'orange-lightest',
      'yellow-dark',
      'yellow',
      'yellow-light',
      'yellow-lightest',
      'green-dark',
      'green',
      'green-light',
      'green-lightest',
      'teal-dark',
      'teal',
      'teal-light',
      'teal-lightest',
      'blue-dark',
      'blue',
      'blue-light',
      'blue-lightest',
      'indigo-dark',
      'indigo',
      'indigo-light',
      'indigo-lightest',
      'purple-dark',
      'purple',
      'purple-light',
      'purple-lightest',
      'pink-dark',
      'pink',
      'pink-light',
      'pink-lightest',
    ]
  },
  shadows: {
    '1': '0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.15)',
    '2': '0 3px 6px rgba(0,0,0,0.12), 0 3px 6px rgba(0,0,0,0.13)',
    '3': '0 10px 20px rgba(0,0,0,0.13), 0 6px 6px rgba(0,0,0,0.13)',
    '4': '0 14px 28px rgba(0,0,0,0.16), 0 10px 10px rgba(0,0,0,0.11)',
    '5': '0 19px 38px rgba(0,0,0,0.18), 0 15px 12px rgba(0,0,0,0.11)',
  },
}