Suggest an editImprove this articleRefine the answer for “What is a utility class?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**A utility class** is a CSS class responsible for strictly one specific property, applied to an element to give it a single visual characteristic. **Key point:** 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.Shown above the full answer for quick recall.Answer (EN)ImageA 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** ```html <div class="mt-4 text-center bg-gray-200 p-2"> ``` Here every class is a separate property: | Class | What it does | |---|---| | `mt-4` | sets the top margin | | `text-center` | centers the text | | `bg-gray-200` | sets the background color | | `p-2` | sets the inner padding | --- ### **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.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.