What is a utility class?

A utility class is a CSS class responsible for strictly one specific property and applied to an element to give it a single visual characteristic. Such a class does not "describe a component"; it performs one small function, for example setting a spacing value, a color, a font or an alignment.

---

#Example of utility classes

Here every class is a separate property:

---

#Signs of a utility class

• responsible for one task / one CSS property;
• short and standardized;
• combined with others to style an element;
• does not depend on context: it behaves predictably anywhere.

---

#Why this matters

The utility approach (for example, in Tailwind) lets you:

• assemble UI quickly without writing custom CSS;
• avoid cascade conflicts;
• maintain a consistent design (everyone draws on the same values).

---

#Summary

A utility class is a small, atomic CSS class that sets one property and serves as a building block for the interface. Together, such classes let you construct the appearance of elements without creating custom CSS rules.