xyy-web/tailwind.config.js

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

const generateSpacingMap = () => {
  const tmpList = {}
  for (let index = 0; index < 1000; index++) {
    tmpList[index] = `${index}px`
  }
  return tmpList
}

const generateFontSize = () => {
  const tmpList = {}
  let start = 14
  for (let index = 1; index < 50; index++) {
    tmpList[`${index === 1 ? '' : index}xl`] = `${start + 2}px`
    start = start + 2
  }
  return tmpList
}

module.exports = {
  content: [
    './src/components/**/*.{js,vue,ts}',
    './src/layouts/**/*.vue',
    './src/pages/**/*.vue',
    './src/plugins/**/*.{js,ts}',
    './src/app.vue'
  ],
  theme: {
    spacing: {
      ...generateSpacingMap(),
      wrap: '1200px'
    },
    fontSize: {
      sm: '12px',
      base: '14px',
      ...generateFontSize()
    },
    lineHeight: {
      sm: '12px',
      base: '14px',
      xl: '16px',
      '2xl': '18px',
      '3xl': '20px',
      '4xl': '22px',
      '5xl': '24px',
      '6xl': '26px',
      '7xl': '28px',
      '8xl': '30px',
      '9xl': '32px',
      '11xl': '36px',
      '12xl': '38px',
      '14xl': '42px'
    },
    borderRadius: {
      sm: '2px',
      DEFAULT: '4px',
      md: '6px',
      lg: '8px',
      xl: '10px',
      '2xl': '12px',
      '3xl': '14px',
      '4xl': '16px',
      '5xl': '18px',
      '6xl': '20px',
      full: '9999px'
    },

    extend: {
      colors: {
        primary: '#fd9a00',
        linkHover: '#fd9a00',
        navEntryHover: 'rgba(0, 0, 0, 0.04)',
        noticeContent: '#61687c',
        'black-3': '#333333',
        'black-4': '#444444',
        'black-6': '#666666',
        'black-9': '#999999',
        'black-c': '#cccccc',
        'black-d': '#dddddd',
        'black-e': '#eeeeee',
        'black-f5': '#f5f5f5',
        'black-fa': '#fafafa',
        'black-ef': '#efefef',
        line: '#f8f8f8'
      },
      boxShadow: {
        '3xl': '0 0 12px 0 rgba(0,0,0,0.1)',
        card: '0 3px 11px 1px rgba(93, 93, 03, 0.2)',
        navEntry: '4px 0px 40px 0px rgba(93, 93, 03, 0.2)'
      },
      minWidth: {
        wrap: '1200px'
      },
      fontFamily: {
        youSheBiaoti: ['YouSheBiaoTiHei'],
        DIN: ['DINAlternate-Bold, DINAlternate']
      },
      letterSpacing: {
        1: '1px'
      },
      lineClamp: {
        8: '8',
        9: '9'
      }
    }
  }
}