Utility-first CSS applies single-purpose classes in HTML: class='flex items-center gap-4 p-6'. Tailwind CSS is the most popular utility-first framework. It reduces custom CSS and speeds up building UIs significantly.
Utility-First CSS (like Tailwind)
/* Build small, single-purpose classes */
.flex { display: flex; }
.grid { display: grid; }
.hidden { display: none; }
.mt-4 { margin-top: 16px; }
.mb-4 { margin-bottom: 16px; }
.px-4 { padding-left: 16px; padding-right: 16px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.text-center { text-align: center; }
.font-bold { font-weight: 700; }
.text-sm { font-size: 0.875rem; }