CSS Utility-first Systems Cheat Sheet

Tokens + utilities

Last Updated: November 21, 2025

Focus Areas

Focus
Use tokens for spacing
Keep utility names predictable

Commands & Queries

.u-mt-4 { margin-top: 1rem; }
Define token
@apply text-center
Compose
gap: var(--space-4)
Use tokens

Summary

Utility systems accelerate UI builds.

💡 Pro Tip: Document tokens in a style guide.
← Back to Web Dev & CSS | Browse all categories | View all cheat sheets