/* eslint-disable */
const colors = require('tailwindcss/colors');

module.exports = {
  important: true,
  content: ['./src/**/*.{vue,ts}'],
  theme: {
    backgroundColor: (theme) => ({
      ...theme('colors'),
      themeC: '#A31B50',
    }),
    inset: {
      '0': 0,
      '1/6': '18%',
      '1/5': '22%',
      // ws: '351px',
      'xs': '33px',
    },
    fontSize: {
      'xs': '.75rem',
      'sm': '.875rem',
      'base': '1rem',
      'lg': '1.125rem',
      'xl': '1.25rem',
      '2xl': '1.5rem',
      '3xl': '1.875rem',
      '4xl': '2.25rem',
      '5xl': '3rem',
      '6xl': '4rem',
      '7xl': '5rem',
    },
    screens: {
      // sm: '768px',
      md: '992px',
      // lg: '1200px',
      xl: '1536px',
    },
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: colors.black,
      white: colors.white,
      blue: colors.blue,
      gray: {
        ...colors.gray,
        primary: '#303133',
        regular: '#606266',
        secondary: '#909399',
        placeholder: '#C0C4CC',
      },
      primary: {
        DEFAULT: '#409eff',
        light: '#a0cfff',
        lighter: '#ecf5ff',
      },
      success: {
        DEFAULT: '#67c23a',
        light: '#b3e19d',
        lighter: '#f0f9eb',
      },
      warning: {
        DEFAULT: '#e6a23c',
        light: '#f3d19e',
        lighter: '#fdf6ec',
      },
      danger: {
        DEFAULT: '#f56c6c',
        light: '#fab6b6',
        lighter: '#fef0f0',
      },
      secondary: {
        DEFAULT: '#909399',
        light: '#c8c9cc',
        lighter: '#f4f4f5',
      },
      theme: '#A31B50',
      grayscale: '#DADADB',
    },
    extend: {
      transitionDuration: {
        // vue 文档中提到，过度效果的时间一般在0.1s-0.4s之间，而0.25s会是一个比较好的值
        // https://v3.vuejs.org/guide/transitions-overview.html#timing
        250: '250ms',
        350: '350ms',
      },
      transitionProperty: {
        width: 'width',
        margin: 'margin',
      },
      // el-menu 展开时最小宽度是 200px
      // el-menu 折叠时宽度是 64px
      width: {
        'sidebar': '200px',
        'sidebar-collapse': '64px',
      },
      margin: {
        'sidebar': '200px',
        'sidebar-collapse': '64px',
      },
    },
    backgroundImage: {
      'home-pattern': "url('/src/assets/images/bg.png')",
      'layout': "url('/src/assets/images/layout_bg.png)",
    },
    backgroundSize: {
      'auto': 'auto',
      'cover': 'cover',
      'contain': 'contain',
      '100%': '100% 98%',
    },
  },
  variants: {
    // extend: {
    //   borderStyle: ['hover'],
    // },
  },
  plugins: [],
  // corePlugins: {
  //   preflight: false,
  // },
};