const colors = require('tailwindcss/colors')

module.exports = {
  content: [
    './client/index.html',
    './client/src/**/*.{vue,js,ts,jsx,tsx}',
    './server/vbv_lernwelt/**/*.{html,js}',
  ],
  theme: {
    fontFamily: {
      sans: ['Buenos Aires', 'sans-serif'],
    },
    extend: {
      spacing: {
        '128': '32rem',
      }
    },
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      'white': '#ffffff',
      'blue': {
        900: '#00224D',
      },
      'sky': {
        500: '#41B5FA',
      },
      'orange': {
        500: '#FE955A',
      },
      'green': {
        500: '#3EDF9C',
      },
      'red': {
        500: '#DE3618',
      },
      'gray': {
        100: '#EDF2F6',
        300: '#E0E5EC',
        500: '#B1C1CA',
        700: '#6F787E',
        900: '#0A0A0A',
      },
    }
  },
  safelist: [{
    pattern: /bg-(blue|sky|orange|green|red)-(500)/,
  }, {
    pattern: /bg-gray-(100|300|500|700|900)/,
  },
    'bg-blue-900',
  ],
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
  ],
}