New

Uniform CSS has now been officially released!
Read more


Special Utilities

Learn about Uniform's extended properties


About Special Utilities

Utility classes are low-level by design and typically only apply a single CSS property. Special utilities combine multiple CSS properties to provide extra commonly needed functionality.


Text Size

The text-<size> special utility differs from font-<size> in that it applies both font-size and line-height properties. For more information, visit Text Size.

<h1 class="text-8xl">
...
</h1>
.text-8xl {
font-size: var(--font-8xl);
line-height: var(--font-8xl-leading);
}

Directional Shorthands

You can apply directional properties like padding and margin horizontally and vertically using the x and y shorthand. For more information, visit directional shorthands.

<div class="px-20 my-32">
...
</div>
.px-20 {
padding-left: 1.25rem;
padding-right: 1.25rem;
}

.my-32 {
margin-top: 2rem;
margin-bottom: 2rem;
}

Split

The split special utility applies horizontal or vertical dividing borders to child elements. For more information, visit Split.

<div class="split-y-2 split-white">
<div>...</div>
<div>...</div>
<div>...</div>
</div>
.split-white > * + * {
--split-ltn: 50%;
--split-opacity: 1;
border-color: hsla(var(--white-hue), var(--white-sat), 100%, var(--split-opacity))
}

.split-y-2 > * + * {
--split-top: 1;
--split-bottom: 0;
border-width: calc(var(--size-2) * var(--split-top)) 0 calc(var(--size-2) * var(--split-bottom)) 0;
}

Gutter

The gutter special utility applies margin-based horizontal or vertical spacing of child elements using the Lobotomized Owl selector. For more information, visit Gutter.

<div class="gutter-x-20">
<div>...</div>
<div>...</div>
<div>...</div>
</div>
.gutter-x-20 > * + * {
--gutter-right: 0,
--gutter-left: 1,
margin: 0 calc(var(--size-20) * var(--gutter-right)) 0 calc(var(--size-20) * var(--gutter-left));
}