import plugin from 'tailwindcss/plugin'

export default {
  content: ['./src/**/*.{html,js,ts,vue,scss,css}'],
  corePlugins: {
    preflight: false
  },
  theme: {
    extend: {
      spacing: {
        0: '0px',
        0.5: '2px',
        1: '4px',
        1.5: '6px',
        2: '8px',
        2.5: '10px',
        3: '12px',
        3.5: '14px',
        4: '16px',
        4.5: '18px',
        5: '20px',
        5.5: '22px',
        6: '24px',
        6.5: '26px',
        7: '28px',
        7.5: '30px',
        8: '32px',
        8.5: '34px',
        9: '36px',
        9.5: '38px',
        10: '40px',
        10.5: '42px',
        11: '44px',
        11.5: '46px',
        12: '48px',
        12.5: '50px',
        13: '52px',
        13.5: '54px',
        14: '56px',
        14.5: '58px',
        15: '60px',
        15.5: '62px',
        16: '64px',
        18: '72px',
        19: '74px',
        20: '80px',
        22: '88px',
        24: '96px',
        26: '100px',
        27: '110px',
        28: '112px',
        30: '120px',
        31: '126px',
        32: '128px',
        36: '144px',
        40: '160px',
        44: '176px',
        45: '180px',
        46: '184px',
        47: '190px',
        48: '192px',
        49: '200px',
        52: '208px',
        53: '210px',
        54: '214px',
        55: '220px',
        56: '224px',
        60: '240px',
        61: '248px',
        62: '254px',
        64: '256px',
        65: '268px',
        72: '288px',
        80: '320px',
        96: '384px',
        97: '390px',
        98: '400px',
        99: '420px',
        100: '440px'
      },
      colors: {
        pink: {
          default: 'rgba(197, 51, 154, 1)',
          10: '#FFE5F8',
          100: '#CB339F',
          200: '#EA64C2'
        },
        orange: {
          default: 'rgba(255, 71, 19, 1)'
        },
        gray: {
          default: 'rgba(239, 239, 239, 1)',
          100: 'rgba(160, 160, 160, 1)',
          200: '#F0F0F0'
        }
      },
      boxShadow: {
        default: '0px 16px 24px 0px rgba(211, 156, 195, 0.12)',
        100: '0px 0px 30px 0px rgba(0, 0, 0, 0.10)',
        200: '0px 10px 20px 0px rgba(213, 104, 182, 0.10)'
      },
      fontFamily: {
        300: ['HarmonyOS_Sans_SC_Regular', 'Helvetica Neue', 'Helvetica', 'PingFang SC', 'Arial', 'sans-serif'],
        700: ['HarmonyOS_Sans_SC_Bold', 'Helvetica Neue', 'Helvetica', 'PingFang SC', 'Arial', 'sans-serif']
      },
      fontSize: {
        12: '12px',
        14: '14px',
        16: '16px',
        18: '18px',
        20: '20px',
        22: '22px',
        24: '24px',
        26: '26px',
        28: '28px',
        30: '30px',
        32: '32px',
        34: '34px',
        36: '36px',
        38: '38px',
        40: '40px',
        42: '42px',
        44: '44px',
        46: '46px',
        48: '48px',
        50: '50px',
        52: '52px',
        54: '54px',
        56: '56px',
        58: '58px',
        60: '60px',
        64: '64px'
      },
      borderRadius: {
        inherit: 'inherit',
        none: '0',
        sm: '2px',
        DEFAULT: '4px',
        md: '6px',
        xl: '8px',
        lg: '12px',
        '2xl': '16px',
        '3xl': '24px',
        '4xl': '32px',
        '5xl': '40px',
        '6xl': '48px',
        full: '50%'
      },
      lineHeight: {
        3: '12px',
        4: '16px',
        4.5: '18px',
        5: '20px',
        6: '24px',
        7: '28px',
        8: '32px',
        9: '36px',
        10: '40px',
        11: '44px',
        12: '48px',
        12.5: '50px',
        13: '52px',
        13.5: '54px',
        14: '56px'
      },
      zIndex: {
        10: '10',
        20: '20',
        30: '30',
        40: '40',
        50: '50',
        60: '60',
        70: '70',
        80: '80',
        90: '90',
        100: '100',
        200: '200',
        300: '300',
        400: '400',
        500: '500',
        600: '600',
        700: '700',
        800: '800',
        900: '900',
        max: '9999'
      }
    }
  },
  plugins: [
    plugin(function ({ addUtilities }) {
      addUtilities({
        '.flex-center': {
          display: 'flex',
          'align-items': 'center',
          'justify-content': 'center'
        },
        '.cover': {
          width: '100%',
          height: '100%',
          'object-fit': 'cover'
        },
        '.contain': {
          width: '100%',
          height: '100%',
          'object-fit': 'contain'
        }
      })
    })
  ]
}