/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#ecfeff',
          100: '#cffafe',
          200: '#a5f3fc',
          300: '#67e8f9',
          400: '#22d3ee',
          500: '#06b6d4',
          600: '#0891b2',
          700: '#0e7490',
          800: '#155e75',
          900: '#164e63',
        }
      },
      screens: {
        'xs': '475px',
        // default breakpoints
        // 'sm': '640px',
        // 'md': '768px',
        // 'lg': '1024px',
        // 'xl': '1280px',
        // '2xl': '1536px',
      },
      fontSize: {
        'xxs': '.625rem', // 10px
      },
      spacing: {
        '18': '4.5rem',
        '88': '22rem',
        '120': '30rem',
      }
    },
  },
  plugins: [],
  corePlugins: {
    preflight: false, // Disable to avoid conflicts with Element Plus
  }
}