use my amazing config won't regret

my config unocss.config.ts

import {
	defineConfig,
	presetAttributify,
	presetIcons,
	presetTagify,
	presetWebFonts,
	presetWind,
	transformerDirectives,
	transformerVariantGroup
} from 'unocss'

export default defineConfig({
	//extractors: [extractorSvelte],
	transformers: [transformerDirectives(), transformerVariantGroup()],
	presets: [
		presetWind(),
		presetAttributify({ ignoreAttributes: ['block'] }),
		presetTagify(),
		presetIcons({
			cdn: 'https://esm.sh/',

			extraProperties: {
				display: 'inline-block',
				'vertical-align': 'middle',
				height: '1.2em',
				width: '1.2em'
			}
		}),
		presetWebFonts({
			provider: 'google',
			fonts: {
				// these will extend the default theme

				// custom ones
				playfair: [
					{
						name: 'playfair display',
						weights: ['200', '500', '800'],
						italic: false
					}
				],
				ysra: [
					{
						name: 'ysra',
						weights: ['200', '400', '600', '800'],
						italic: true
					}
				],
				hind: [
					{
						name: 'hind guntur',
						weights: ['200', '400', '600', '800'],
						italic: true
					}
				]
			}
		})
	],

	exclude: [
		'node_modules',
		'dist',
		'.git',
		'.husky',
		'.vscode',
		'public',
		'build',
		'mock',
		'./stats.html'
	],

	rules: [
		[
			'text-shadow',
			{
				'text-shadow':
					'-1px -1px 1px #000, 1px -1px 1px #673b2c, -1px 1px 1px #673b2c, 1px 1px 1px #673b2c'
			}
		],
		[
			'card-box',
			{
				'box-shadow': '0 0 10px 0 #176a73',
				border: '2px solid #176a73'
			}
		],
		[
			/^flex-(row|col)-([1-9])$/,
			([, direction, number]) => {
				type PositionProps = Readonly<'start' | 'center' | 'end' | ''>

				const positions: Record<number, [PositionProps, PositionProps]> = {
					1: ['start', 'start'],
					2: ['center', 'start'],
					3: ['end', 'start'],
					4: ['start', 'center'],
					5: ['center', 'center'],
					6: ['end', 'center'],
					7: ['start', 'end'],
					8: ['center', 'end'],
					9: ['end', 'end']
				}

				function getPosition(n: number): [PositionProps, PositionProps] {
					return positions[n] || ['', '']
				}

				//IIFE ==>
				type Direction = Readonly<'row' | 'col'>
				const direction2 = ((): 'row' | 'column' => {
					const d: Direction = direction as Direction;
					return d === 'row' ? 'row' : 'column';
				})()

				const [justify, align] = getPosition(Number(number))
				return {
					display: 'flex',
					'flex-direction': direction2,
					'justify-content': justify,
					'align-items': align
				} as const
			}
		],

		[
			/^p-(\d+)-(\d+)?-?(\d+)?-?(\d+)?$/,
			([, t, r, b, l]) => {
				const effectiveArr: string[] = [t, r, b, l].filter(
					Boolean
				) /*  check if it's true */
				const numReg = /^((?![A-Za-z]).)*$/ /* check no letters */
				const paddingList = effectiveArr.map((e): string =>
					numReg.test(e) ? `${~~e / 4}rem` : e
				)
				return effectiveArr.length === 0
					? { padding: '0px' }
					: { padding: paddingList.join(' ') }
			}
		],
		[
			/^m-(\d+)-(\d+)?-?(\d+)?-?(\d+)?$/,
			([, t, r, b, l]) => {
				const numReg = /^((?![A-Za-z]).)*$/
				const marginList: string[] = [t, r, b, l]
					.filter(Boolean)
					.map((e: string): string => (numReg.test(e) ? `${~~e / 4}rem` : e))
				return marginList.length === 0
					? { margin: '0px' }
					: { margin: marginList.join(' ') }
			}
		]
	],
	shortcuts: [
		{
			btn: 'focus:outline-none focus:(ring ring-offset-4 ring-4) inline m-0.25 font-semibold rounded-lg shadow-md cursor-pointer md:(p-2-4)'
		},

		[
			/^btn-(.*)-(\d+)$/,
			([, c, d]) => {
				const e: string =
					~~d > 500 ? (~~d - 200).toString() : (~~d + 200).toString()
				return `bg-${c}-${d} hover:bg-${c}-${e} active:rotate-2 focus:(rotate-1 bg-${c}-${e}) font-semibold rounded-lg block border md:inline-block font-medium text-center focus:outline-none focus:ring `
			}
		],
		[
			/^border-(\d)(?<!\\)\|([a-z]+)-([1-8][0-9]{2}|900)$/,
			([, px, color, power]) => {
				return `border-${px} border-${color}-${power} border`
			}
		],
		[
			/^text-([a-z]+)(?<!\\)\|(.*)$/,
			([, px, color]) => {
				return `text-${px} text-${color}`
			}
		],
		[
			//text-sm|red-600|center
			/^text-([a-z]+)(?<!\\)\|(.*)?(?<!\\)\|(start|center|end|justify)?$/,
			([, px, color, align]) => `text-${px} text-${color} text-${align}`
		],
		{
			container:
				'px-1 relative 2xl:px-[calc(50%-(81rem/2))] xl:(px-[calc(50%-(71rem/2))] mx-auto) box-border'
		},
		{
			'absolute-center': '-translate-1/2 left-1/2 top-1/2'
		},
		[/^size-(.*)$/, ([, s]) => `h-${s} w-${s}`]
	],
	theme: {
		colors: {
			primary: '#294936',
			secondary: '#3E6259',
			ternary: '#5B8266',
			text: {
				dark: '#212922',
				light: '#AEF6C7'
			}
		},

		fontFamily: {
			primary: 'Playfair Display',
			secondary: 'Yrsa',
			ternary: 'Hind Guntur'
		},
		fontSize: {
			cqi: ['clamp(0.60rem, .65cqi, .9cqi)', '1'],
			xs: ['clamp(0.78rem, calc(0.77rem + 0.03vw), 0.80rem)', '1'],
			sm: ['clamp(0.94rem, calc(0.92rem + 0.11vw), 1.00rem)', '1'],
			base: ['clamp(1.13rem, calc(1.08rem + 0.22vw), 1.25rem)', '1'],
			md: ['clamp(1.35rem, calc(1.28rem + 0.37vw), 1.56rem)', '1'],
			lg: ['clamp(1.62rem, calc(1.50rem + 0.58vw), 1.95rem)', '1'],
			xl: ['clamp(1.94rem, calc(1.77rem + 0.87vw), 2.44rem)', '1'],
			'2xl': ['clamp(2.33rem, calc(2.08rem + 1.25vw), 3.05rem)', '1'],
			'3xl': ['clamp(2.80rem, calc(2.45rem + 1.77vw), 3.82rem)', '1'],
			'4xl': ['clamp(3.36rem, calc(2.87rem + 2.45vw), 4.77rem)', '1'],
			'5xl': ['clamp(4.03rem, calc(3.36rem + 3.36vw), 5.96rem)', '1'],
			'6xl': ['clamp(4.84rem, calc(3.93rem + 4.54vw), 7.45rem)', '1']
		},
		container: {
			center: true,
			padding: {
				DEFAULT: '1rem',
				sm: '2rem',
				lg: '4rem',
				xl: '5rem',
				'2xl': '6rem'
			}
		},
		breakpoints: {
			xs: '280px',
			sm: '480px',
			md: '720px',
			lg: '1024px',
			xl: '1280px',
			'2xl': '1680px'
		},
		aspectRatio: {
			'4/3': '4 / 3',
			'1/3': '1 / 3',
			'1/2': '1 / 2'
		}
	},

	safelist: 'dark light prose prose-sm m-auto text-left'.split(' ')
})