UnoCSS Complete Guide

Introduction บทนำ

UnoCSS คือ Utility-first CSS framework ที่ทำงานแบบ on-demand สร้างมาเพื่อให้มีขนาดเล็กและเร็ว UnoCSS เป็น utility-first CSS framework ที่ทำงานแบบ on-demand เร็วกว่า Tailwind CSS

Installation การติดตั้ง

ติดตั้ง UnoCSS และ reset styles ด้วยคำสั่ง Bun

bun add -D unocss @unocss/reset

Configuration การตั้งค่า

ไฟล์หลักสำหรับกำหนดค่าทุกอย่างของ UnoCSS ในโปรเจค สร้างไฟล์ uno.config.ts

import { defineConfig } from 'unocss'

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

Core Concepts แนวคิดหลัก

พื้นฐานสำคัญที่ควรรู้เกี่ยวกับ UnoCSS

Utilities คลาสยูทิลิตี้

คลาสสำเร็จรูปสำหรับ styling ต่างๆ ที่ใช้บ่อย

<div class="p-4 max-w-screen-md mx-auto">
  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    Button
  </button>
</div>

Presets ชุดค่าประจำ

ชุดค่าตั้งต้นที่รวมมาให้ใช้งานได้ทันที

import { presetUno, presetAttributify } from 'unocss'

export default defineConfig({
  presets: [
    presetUno(), // คลาสแบบ Tailwind
    presetAttributify(), // ใช้เป็น attribute ได้
  ],
})

Features คุณสมบัติ

ฟีเจอร์สำคัญที่ทำให้ UnoCSS มีประสิทธิภาพ

Variant Groups กลุ่มตัวแปร

การจัดกลุ่ม utility classes สำหรับ state ต่างๆ

<div class="hover:bg-gray-100 hover:font-medium">
  Hover me
</div>

Shortcuts ทางลัด

สร้างคลาสรวมเพื่อใช้งานซ้ำได้ง่าย

export default defineConfig({
  shortcuts: {
    btn: 'py-2 px-4 font-semibold rounded-lg',
    'btn-primary': 'btn bg-blue-500 text-white',
  },
})

Icons ไอคอน

ระบบไอคอนที่ใช้งานง่ายกับ UnoCSS

import { presetIcons } from '@unocss/preset-icons'

export default defineConfig({
  presets: [
    presetIcons({
      scale: 1.2,
      extraProperties: {
        'display': 'inline-block',
      },
    }),
  ],
})

Theme Configuration การตั้งค่าธีม

กำหนดสี, ขนาดฟอนต์, breakpoints ตามต้องการ

export default defineConfig({
  theme: {
    colors: {
      primary: '#3b82f6',
      secondary: '#f43f5e',
    },
    breakpoints: {
      sm: '640px',
      md: '768px',
    },
  },
})

Animations แอนิเมชั่น

สร้างและจัดการ animation ด้วย utility classes

export default defineConfig({
  rules: [
    ['animate-spin', { animation: 'spin 1s linear infinite' }],
  ],
  shortcuts: [
    ['spin-slow', 'animate-spin duration-3000'],
  ],
})

Framework Integration การใช้งานกับเฟรมเวิร์ก

วิธีใช้ UnoCSS กับเฟรมเวิร์กยอดนิยม

Vue

<template>
  <div class="p-4 text-blue-500">
    <button class="btn-primary">Click</button>
  </div>
</template>

React

function Button() {
  return <button className="btn-primary">Click</button>;
}

Custom Rules กฎที่กำหนดเอง

สร้าง utility classes ด้วยตัวเองตามความต้องการ

export default defineConfig({
  rules: [
    [/^m-([\d.]+)$/, ([_, num]) => ({ margin: `${num}px` })],
    ['flex-center', { display: 'flex', 'justify-content': 'center', 'align-items': 'center' }],
  ],
})

Transformers ตัวแปลง

เครื่องมือแปลง syntax ให้ใช้งานได้สะดวกขึ้น

import { transformerVariantGroup } from 'unocss'

export default defineConfig({
  transformers: [
    transformerVariantGroup(), // enables (group) syntax
  ],
})

Comparison การเปรียบเทียบ

ความแตกต่างระหว่าง UnoCSS และทางเลือกอื่น

Feature	UnoCSS	Tailwind
Performance	⚡ Faster	Fast
Bundle Size	Smaller	Small
Customization	Flexible	Flexible
On-demand	Yes	Yes
Presets	Many	Limited

Best Practices แนวทางปฏิบัติที่ดี

เคล็ดลับและวิธีใช้งาน UnoCSS ให้มีประสิทธิภาพ

1. ใช้ shortcuts สำหรับคลาสที่ใช้บ่อย
2. ใช้ variant groups เพื่อจัดกลุ่ม
3. ตั้งค่าใน uno.config.ts ให้เหมาะสม
4. ใช้ presetIcons สำหรับไอคอน
5. ใช้ @unocss/reset สำหรับ normalize CSS