Presets ใน UnoCSS

Preset คือชุดของ rules, theme, preflights, และ config อื่น ๆ ที่เตรียมไว้ล่วงหน้า ช่วยให้เริ่มใช้งาน UnoCSS ได้เร็วขึ้น

ตัวอย่าง Preset ที่นิยม

• presetWind – คล้าย TailwindCSS
• presetAttributify – ใช้ attribute แทน class
• presetIcons – ใช้ไอคอนผ่าน class
• presetWebFonts – ใช้ web font ง่าย ๆ

วิธีใช้ Preset

ใน uno.config.ts:

import { defineConfig, presetIcons, presetWind } from "unocss";

export default defineConfig({
  presets: [
    presetWind(),
    presetIcons(),
  ],
});

การสร้าง Custom Preset

สามารถสร้าง preset ของตัวเองได้ เช่น

import { createPreset } from "unocss";

const myPreset = createPreset({
  name: "my-preset",
  rules: [
    ["brand-btn", { background: "#1e40af", color: "#fff" }],
  ],
});

แล้ว import ไปใส่ใน config ได้เลย

---