Styling System
LUI uses utility class strings to style UI Toolkit elements. The syntax is intentionally close to Tailwind CSS while mapping to Unity UI Toolkit capabilities.
Class strings
Classes are space-separated utility tokens:
"p-4 rounded-xl bg-slate-900 border border-slate-700 text-white mt-[12px]"Unknown classes log a one-time warning.
Sections
| Section | Covers |
|---|---|
| Variants | State, orientation, breakpoint, and safe-area prefixes |
| Layout | Flex, visibility, alignment, wrapping, grow/shrink, gaps, overflow |
| Sizing | Width, height, min/max size, size-*, and basis-* |
| Spacing | Padding, margin, negative margins, and mx-auto |
| Position | Relative/absolute positioning and inset helpers |
| Colors | Background, text, border, tint, shadow, outline, and ring colors |
| Typography | Text size, alignment, font weight, font family, italic, wrapping |
| Borders and Radius | Border widths, border colors, and rounded corners |
| Effects and Transforms | Opacity, scale, rotate, and translate utilities |
| Transitions | Transition property, duration, and easing utilities |
| Shadows and Outlines | Box shadows, text shadows, and SDF text outlines |
| Focus Rings | Renderer-drawn focus ring utilities |
| Pointer Events | Input/picking behavior for visual-only overlays |
| Images | Image scale modes and tinting |
Last updated on