Rules ใน UnoCSS

Rules คือกฎที่ใช้แปลง utility class เป็น CSS จริง ๆ UnoCSS มี rules ให้ใช้มากมาย แต่คุณสามารถเพิ่ม custom rule ได้เอง

ตัวอย่าง Rule พื้นฐาน

["m-1", { margin: "0.25rem" }]["p-2", { padding: "0.5rem" }];

การสร้าง Custom Rule

ใน uno.config.ts:

export default defineConfig({
  rules: [
    ["brand-btn", {
      background: "#1e40af",
      color: "#fff",
      padding: "8px 16px",
    }],
    // Dynamic rule
    [/^h-(\d+)$/, ([, d]) => ({ height: `${d}px` })],
  ],
});

Tips

• Custom rule สามารถเป็น static หรือ dynamic ก็ได้
• ใช้ regex เพื่อสร้าง dynamic rule (เช่น h-100 → height: 100px)
• จัดลำดับความสำคัญด้วย layer ได้

อ่าน UnoCSS Rules Docs เพิ่มเติม

---