CSS Utils v0.51.0 is a small but useful cleanup release focused on spacing utilities.

The main goal of this release was to make the spacing system more complete and consistent. Until now, basic utilities like mt-1, mb-2 or p-3 were available, but some commonly used shorthand variants were still missing.

With this update, the spacing utilities now cover more practical layout use cases.

Added spacing shorthands

This release adds support for horizontal and vertical spacing utilities:

.mx-1
.mx-2
.mx-3

.my-1
.my-2
.my-3

.px-1
.px-2
.px-3

.py-1
.py-2
.py-3

These classes make it easier to apply spacing on both sides of an axis without repeating individual direction classes.

Instead of writing:

<div class="ms-2 me-2">...</div>

you can now write:

<div class="mx-2">...</div>

The same applies to vertical spacing:

<div class="my-3">...</div>

Added auto margin helpers

The release also adds missing auto margin utilities:

.m-auto
.mx-auto
.my-auto

These helpers are useful for common layout patterns, especially centering elements or pushing elements inside flex/grid layouts.

Example:

<div class="mx-auto w-50">Centered content</div>

Responsive variants

The new spacing utilities also support responsive variants, following the existing naming pattern:

.mt-md-2
.mx-md-auto
.px-lg-3
.my-xl-4

This keeps the utility API predictable:

[property]-[breakpoint]-[value]

Examples:

<section class="px-2 px-md-3 px-lg-4">...</section>
<div class="mt-2 mt-lg-4">...</div>

Why numeric spacing?

Spacing utilities continue to use numeric values like mt-1, p-2 or gap-3.

This keeps spacing aligned with the internal spacing scale:

--spacer-1
--spacer-2
--spacer-3
--spacer-4

For layout spacing, numeric utilities are easier to scan and extend than named values like mt-sm or mt-md.

Visual style utilities, such as shadows or border radius, still use semantic size names:

.shadow-sm
.shadow-md
.shadow-lg

.rounded-sm
.rounded-md
.rounded-lg

This distinction keeps the system readable:

Spacing:        mt-1, px-2, gap-3
Visual styles:  shadow-sm, rounded-md

Summary

CSS Utils v0.51.0 improves the spacing utility system by adding missing shorthand classes, auto margin helpers and responsive variants.

The update makes the utility API more complete, more predictable and easier to use in real layouts.

Use the latest version via npm or visit https://css-utils.oardi.com/