Unocss

Goal

ใช้ UnoCSS สำหรับ atomic CSS engine ที่ generate ทันที ด้วย performance สูงและ fully customizable

Scope

ใช้สำหรับ atomic CSS styling ด้วย UnoCSS engine

Execute

• ติดตั้ง UnoCSS ด้วย bun add -D unocss
• อ่าน guide/installation.md สำหรับการติดตั้งและ setup
• อ่าน guide/quick-start.md สำหรับเริ่มต้นใช้งาน
• อ่าน guide/key-concept.md สำหรับแนวคิดหลัก
• อ่าน guide/how-it-works.md สำหรับวิธีการทำงาน
• อ่าน key-concepts/ สำหรับแนวคิดเฉพาะทาง
  • presets.md - Preset system และ custom presets
  • rules.md - Atomic CSS rules
  • shortcuts.md - Utility shortcuts
  • theme-system.md - Theme และ design tokens
  • transformers.md - CSS transformers
  • extractors.md - Utility extraction
  • layers.md - CSS layer system
  • safelist.md - Utilities safelist
  • compilation-mode.md - Class compilation
  • variants.md - Pseudo-class variants
• อ่าน guide/configuration.md สำหรับการตั้งค่า
• อ่าน references/configuration.md สำหรับ configuration reference
• ตั้งค่า UnoCSS configuration
• อ่าน guide/features.md สำหรับ features ที่มี
• อ่าน guide/patterns.md สำหรับ patterns ทั่วไป
• ใช้ atomic CSS utilities
• อ่าน guide/integration.md สำหรับ preset integration
• ใช้ presets สำหรับ extend functionality
  • guide/preset-wind4.md - Tailwind v4 compatibility
  • guide/preset-tagify.md - Tag-based CSS
  • guide/preset-rem-to-px.md - Rem to px conversion
  • guide/preset-typography.md - Typography presets
  • guide/preset-web-fonts.md - Web fonts integration
• ใช้ shortcuts สำหรับ custom utilities
• อ่าน guide/best-practices.md สำหรับ best practices
• ใช้ icon system ที่มี 100+ collections
• อ่าน guide/architecture.md สำหรับ system architecture
• อ่าน guide/structure.md สำหรับ project structure
• อ่าน guide/troubleshooting.md สำหรับปัญหาทั่วไป
• อ่าน guide/transformer-attributify-jsx.md สำหรับ JSX attributify mode
• อ่าน guide/inspector.md สำหรับ CSS generation inspector
• อ่าน guide/playground.md สำหรับ online playground

Rules

• ใช้ bun add -D unocss สำหรับ installation
• ใช้ backticks สำหรับ utilities, commands
• ใช้ code blocks สำหรับ examples
• ใช้ ansi markdown diagrams สำหรับ flow และ architecture
• ใช้ atomic CSS utilities
• ใช้ presets สำหรับ extend functionality
• ใช้ shortcuts สำหรับ custom utilities
• ใช้ icon system อย่างเหมาะสม

Expected Outcome

• CSS ที่ generate ทันที
• Performance สูงด้วย on-demand engine
• Utilities ที่ fully customizable
• Icon system ที่ comprehensive