Utility Classes
Utility-first frameworks (Tailwind, Bootstrap utilities) place utilities in a high-priority layer or use !important so they always win over component styles.
CSS
Intermediate
3 min read
Utility Classes and Specificity
Example
/* Tailwind approach: utilities in last @layer */
@layer base, components, utilities;
@layer utilities { .mt-4 { margin-top: 1rem; } .text-red { color: red; } }
/* Bootstrap approach: inline !important on utility classes */
.mt-3 { margin-top: 1rem !important; }
.d-none { display: none !important; } Pro Tip
Utility classes need !important or high @layer priority because they must override component defaults.