// Use when writing UnoCSS with presetOnmax workflow - covers attribute mode patterns, fluid spacing (f- prefix), scale-to-pixel (1px base), custom variants (hocus, reka-*, data-state), nimiq-css design system (nq-* utilities), and Reka UI integration. Apply when editing .vue files with UnoCSS attributes or configuring uno.config.ts.
| name | unocss-onmax |
| description | Use when writing UnoCSS with presetOnmax workflow - covers attribute mode patterns, fluid spacing (f- prefix), scale-to-pixel (1px base), custom variants (hocus, reka-*, data-state), nimiq-css design system (nq-* utilities), and Reka UI integration. Apply when editing .vue files with UnoCSS attributes or configuring uno.config.ts. |
Custom UnoCSS workflow using unocss-preset-onmax with fluid sizing, 1px-base spacing, and attributify mode.
| Concept | Pattern | Example |
|---|---|---|
| Attribute mode | attr="~ value" | flex="~ col gap-8" |
| Fluid spacing | f-{util}-{size} | f-px-md, f-pt-2xl |
| Scale-to-px | 1rem = 4px | p-16 = 16px |
| hocus | hover + focus | bg="neutral hocus:blue" |
| size-X | width + height | size-40 = 40×40px |
Load based on task:
| Task | File |
|---|---|
| Configuring uno.config.ts | preset-onmax.md |
| Writing component styles | attributify.md |
| Responsive typography/spacing | fluid-sizing.md |
| State selectors, dark mode | variants.md |
| nimiq-css utilities (nq-*) | nimiq-css.md |
DO NOT load all files. Each ~400-800 tokens. Load only what's needed.
<div flex="~ col items-center gap-16">
<div text="f-xl neutral-800">
<button bg="neutral-0 hocus:neutral-50">
<div outline="~ 1.5 offset--1.5 neutral/10">
2xs=8/12 xs=12/16 sm=16/24 md=24/32 lg=32/48 xl=48/72 2xl=72/96
size-40 rounded-full <!-- Circle button -->
f-px-md f-pt-sm <!-- Fluid padding -->
outline="1.5 offset--1.5" <!-- Inset outline -->
hocus:bg-neutral-100 <!-- Hover+focus -->
stack <!-- Centered grid overlay -->