LJH_Shop/admin/tailwind.config.cjs

/** @type {import('tailwindcss').Config} */
module.exports = {
	content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
	theme: {
		extend: {
			colors: {
				white: 'var(--el-color-white)',
				black: '#000',
				primary: {
					DEFAULT: 'var(--el-color-primary)',
					'light-3': 'var(--el-color-primary-light-3)',
					'light-5': 'var(--el-color-primary-light-5)',
					'light-7': 'var(--el-color-primary-light-7)',
					'light-8': 'var(--el-color-primary-light-8)',
					'light-9': 'var(--el-color-primary-light-9)',
					'dark-2': 'var(--el-color-primary-dark-2)'
				},
				success: 'var(--el-color-success)',
				warning: 'var(--el-color-warning)',
				danger: 'var(--el-color-danger)',
				error: 'var(--el-color-error)',
				info: 'var(--el-color-info)',
				body: 'var(--el-bg-color)',
				page: 'var(--el-bg-color-page)',
				'tx-primary': 'var(--el-text-color-primary)',
				'tx-regular': 'var(--el-text-color-regular)',
				'tx-secondary': 'var(--el-text-color-secondary)',
				'tx-placeholder': 'var(--el-text-color-placeholder)',
				'tx-disabled': 'var(--el-text-color-disabled)',
				br: 'var(--el-border-color)',
				'br-light': 'var(--el-border-color-light)',
				'br-extra-light': 'var(--el-border-color-extra-light)',
				'br-dark': 'var( --el-border-color-dark)',
				fill: 'var(--el-fill-color)',
				'fill-light': 'var(--el-fill-color-light)',
				'fill-lighter': 'var(--el-fill-color-lighter)',
				mask: 'var(--el-mask-color)',
				secondary: 'var(--el-text-color-secondary)',
				overlay: 'var(--el-bg-color-overlay)'
			},
			fontFamily: {
				sans: ['PingFang SC', 'Microsoft YaHei', 'Arial', 'Hiragino Sans GB', 'sans-serif']
			},
			boxShadow: {
				DEFAULT: 'var(--el-box-shadow)',
				light: 'var(--el-box-shadow-light)',
				lighter: 'var(--el-box-shadow-lighter)',
				dark: 'var(--el-box-shadow-dark)'
			},
			fontSize: {
				xs: 'var(--el-font-size-extra-small)',
				sm: 'var( --el-font-size-small)',
				base: 'var( --el-font-size-base)',
				lg: 'var( --el-font-size-medium)',
				xl: 'var( --el-font-size-large)',
				'2xl': 'var( --el-font-size-extra-large)',
				'3xl': '20px',
				'4xl': '24px',
				'5xl': '28px',
				'6xl': '30px',
				'7xl': '36px',
				'8xl': '48px',
				'9xl': '60px',
				'page-title': '16px'
			},
			spacing: {
				px: '1px',
				0: '0px',
				0.5: '2px',
				1: '4px',
				1.5: '6px',
				2: '8px',
				2.5: '10px',
				3: '12px',
				3.5: '14px',
				4: '16px',
				5: '20px',
				6: '24px',
				7: '28px',
				8: '32px',
				9: '36px',
				10: '40px',
				11: '44px',
				12: '48px',
				14: '56px',
				16: '64px',
				20: '80px',
				24: '96px',
				28: '112px',
				32: '128px',
				36: '144px',
				40: '160px',
				44: '176px',
				48: '192px',
				52: '208px',
				56: '224px',
				60: '240px',
				64: '256px',
				72: '288px',
				80: '320px',
				96: '384px'
			},
			lineHeight: {
				none: '1',
				tight: '1.25',
				snug: '1.375',
				normal: '1.5',
				relaxed: '1.625',
				loose: '2',
				3: '12px',
				4: '16px',
				5: '20px',
				6: '24px',
				7: '28px',
				8: '32px',
				9: '36px',
				10: '40px'
			}
		}
	},
	plugins: [
		require('@tailwindcss/line-clamp') // 引入插件
	]
}