uno.config.ts ใน UnoCSS

uno.config.ts เป็นไฟล์ configuration หลักของ UnoCSS ที่ใช้กําหนดค่าต่างๆ เช่น themes, shortcuts, presets และ transformers

การตั้งค่าพื้นฐาน

// uno.config.ts
import { defineConfig } from 'unocss'

export default defineConfig({
	// ตั้งค่าต่างๆ ที่นี่
})

Theme

Theme ใช้กําหนดค่าพื้นฐานต่างๆ เช่น สี, ขนาด, breakpoints

export default defineConfig({
	theme: {
		colors: {
			'custom-blue': '#1234ff',
			'brand': {
				primary: '#4a90e2',
				secondary: '#ff6b6b'
			}
		},
		breakpoints: {
			sm: '320px',
			md: '768px',
			lg: '1024px'
		}
	}
})

Shortcuts

Shortcuts ช่วยสร้าง utility classes ใหม่จากการรวม utilities ที่มีอยู่

export default defineConfig({
	shortcuts: {
		// แบบ Static
		'btn': 'py-2 px-4 font-semibold rounded-lg shadow-md',
		'btn-green': 'btn bg-green-500 text-white hover:bg-green-700',
		
		// แบบ Dynamic
		[/^btn-(.*)$/, ([, c]) => `bg-${c}-400 text-${c}-100 py-2 px-4 rounded-lg`]
	}
})

Presets

Presets คือชุดของ rules, shortcuts และ themes ที่กําหนดไว้ล่วงหน้า

import { 
	defineConfig,
	presetUno,
	presetAttributify,
	presetIcons
} from 'unocss'

export default defineConfig({
	presets: [
		presetUno(), // preset มาตรฐาน
		presetAttributify(), // เปิดใช้ attributify mode
		presetIcons({
			scale: 1.2,
			cdn: 'https://esm.sh/'
		})
	]
})

Presets ที่นิยมใช้:

• presetUno() - preset มาตรฐาน
• presetAttributify() - สําหรับ attribute mode
• presetIcons() - สําหรับใช้งาน icons
• presetWebFonts() - สําหรับ web fonts
• presetTypography() - สําหรับ typography utilities

Transformers

Transformers ใช้แปลง CSS หรือเพิ่มความสามารถพิเศษ

import { 
	defineConfig,
	transformerDirectives,
	transformerVariantGroup
} from 'unocss'

export default defineConfig({
	transformers: [
		transformerDirectives(), // เปิดใช้ @apply directive
		transformerVariantGroup() // เปิดใช้ variant group
	]
})

Transformers ที่นิยมใช้:

• transformerDirectives() - เปิดใช้ @apply, @screen และ directives อื่นๆ
• transformerVariantGroup() - เปิดใช้ variant group syntax เช่น hover:bg-gray-400 hover:font-medium
• transformerCompileClass() - compile class names ตอน build

Rules

Rules ใช้สร้าง utilities ใหม่

export default defineConfig({
	rules: [
		// Static Rules
		['custom-rule', { color: 'red' }],
		
		// Dynamic Rules
		[/^m-(\d+)$/, ([, d]) => ({ margin: `${d}px` })],
		
		// Complex Rules
		[/^text-(.+)$/, ([, c], { theme }) => {
			if (theme.colors[c])
				return { color: theme.colors[c] }
		}]
	]
})

การใช้งานจริง

ตัวอย่าง configuration ที่ครบถ้วน:

import { 
	defineConfig,
	presetUno,
	presetAttributify,
	presetIcons,
	transformerDirectives
} from 'unocss'

export default defineConfig({
	theme: {
		colors: {
			brand: {
				primary: '#4a90e2'
			}
		}
	},
	shortcuts: {
		'btn': 'py-2 px-4 rounded-lg',
		'btn-primary': 'btn bg-brand-primary text-white'
	},
	presets: [
		presetUno(),
		presetAttributify(),
		presetIcons()
	],
	transformers: [
		transformerDirectives()
	],
	rules: [
		['custom-util', { margin: '100px' }]
	]
})

Tips & Best Practices

• แยก configuration เป็นไฟล์ย่อยถ้ามีขนาดใหญ่
• ใช้ TypeScript เพื่อ type checking
• ตั้งชื่อ shortcuts ให้มีความหมาย
• ระวังการ override rules ที่มีอยู่
• ใช้ theme tokens แทนค่าตายตัว