const colors = require('tailwindcss/colors')
module.exports = {
  purge: ['./src/**/*.html', './src/**/*.vue'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    colors: {
      black: colors.black,
      white: colors.white,
      gray: colors.trueGray,
      primary: 'var(--primary)',
      menuPrimary: 'var(--menu-bg)',
      headPrimary: 'var(--head-bg)',
      loginPrimary: 'var(--login-title)'
    },
    fontSize: {
      title: '1.375rem',
      xs: '.75rem',
      sm: '.875rem',
      tiny: '.875rem',
      base: '1rem',
      lg: '1.125rem',
      xl: '1.25rem',
      '2xl': '1.5rem',
      '3xl': '1.875rem',
      '4xl': '2.25rem',
      '5xl': '3rem',
      '6xl': '4rem'
    },
    extend: {
      spacing: {
        5.5: '1.375rem',
        12.5: '3.125rem',
        15: '3.75rem',
        88: '22rem',
        100: '25rem',
        150: '37.5rem'
      },
      backgroundImage: {
        'brand-bg': "url('~@/assets/image/bg_u7.png')",
        'brand-logo': "url('~@/assets/image/iotsigle.png')",
        'view-module': "url('~@/assets/svg/view-module.svg')",
        settings: "url('~@/assets/svg/settings.svg')",
        fullscreen: "url('~@/assets/svg/fullscreen.svg')",
        'fullscreen-exit': "url('~@/assets/svg/fullscreen-exit.svg')",
        'exit-to-app': "url('~@/assets/svg/exit-to-app.svg')",
        plus: "url('~@/assets/svg/plus.svg')",
        login: "url('~@/assets/image/loginbg.png')"
      }
    }
  },
  variants: {},
  plugins: []
}