CSS Utility-first Systems Cheat Sheet

Tokens + utilities

CSS Utility-first Systems — a quick reference covering core concepts, practical examples, and best practices.

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