/** @type {import('tailwindcss').Config} */
import colors from 'tailwindcss/colors'

export default {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: 'media',
  theme: {
    colors: {
      ...colors,
      'whatsapp': {
        DEFAULT: '#25D366',
        400: '#66e094',
        300: '#92e9b3',
        dark: '#075E54',
        second: '#128c7e',
        gossip: '#dcf8c6',
        bg: '#ece5dd', // '#efeae2' '#eae6df' '#d1d7db'
        bgdark: '#0b141a',
        me: '#ccd5ae', // '#d9fdd3'
      },
      'waba': {
        DEFAULT: '#2ba84a',
        400: '#6bc280',
        300: '#95d4a5',
      },
      'primary': '#1ba784',
    },
    extend: {
      // gridTemplateColumns: {
      //   'responsive':repeat(autofill,minmax('300px',1fr))
      // }
      boxShadow: {
        '1md': '0 0 4px 2px rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
        'heavy': '0 1px 7px 1px rgba(0, 0, 0, 0.3)',
        '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
      }
    },
  },
  plugins: [],
  corePlugins: {
    preflight: false,
    divideColor: true,
  }
};