ALL LESSONS
Module 20
CSS Utility Classes System
Apr 5, 2026
1 min read
Utility-First CSS Approach
Atomic classes like Tailwind CSS patterns.
Spacing Scale
.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.m-auto { margin: auto; }Responsive Utilities
- sm:p-4, md:p-6, lg:p-8
- hover:bg-blue-500
- focus:ring-2 focus:ring-blue