Utility Classes
A minimal set of utility classes for layout, spacing, flexbox, prose, and visibility.
ZUI includes a minimal set of utility classes for common layout and typography tasks. The philosophy is similar to Tailwind CSS — single-purpose classes you compose directly in HTML — but scoped to what ZUI actually needs rather than a full atomic CSS framework.
CSS layer
All utility classes live in the zui.utilities layer, which sits above zui.components. This means utilities always win over component styles when both apply to the same element, without needing !important.
@layer zui.base, zui.components, zui.utilities;Utility categories
Flex
Flexbox utility classes for layout, alignment, and distribution.
Flow
Automatic vertical spacing between child elements using the lobotomised owl selector.
Prose
Rich text styling for long-form content — typography, spacing, and element styles in one class.
Spacing
Margin, padding, and gap utility classes mapped to the fluid space scale.
UI Typography
Utility classes for text sizing, colour, links, and code — designed for UI rather than long-form prose.
Visibility
Utility classes for hiding content visually while keeping it accessible to screen readers.