Suggest an editImprove this articleRefine the answer for “Why is Tailwind called a utility-first framework?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**Tailwind** is called a utility-first framework because its core philosophy is to build the interface from small utility classes, where each class is responsible for one specific CSS property. **Key point:** instead of writing custom selectors and style descriptions, the developer combines utilities directly in the HTML.Shown above the full answer for quick recall.Answer (EN)ImageTailwind is called a **utility-first framework** because its core philosophy is to build the interface from **small utility classes**, where each class is responsible for *one specific CSS property*. Instead of writing custom selectors and style descriptions, the developer combines utilities directly in the HTML. --- ### **What utility-first means, in essence** Instead of this approach: ```css .button { padding: 1rem; font-weight: 600; background: #4f46e5; border-radius: 0.5rem; } ``` Tailwind proposes doing this: ```html <button class="px-4 py-3 font-semibold bg-indigo-600 rounded-lg"> Click </button> ``` In other words, a component's appearance **is described by a set of specific utilities**, not a separate CSS class. --- ### **The main signs of the utility-first approach in Tailwind** **1. Each class = one property** `mt-4`, `flex`, `text-xl`, `rounded`: everything is as atomic as possible. **2. Styles are set directly in the markup** The style is described in the same place the component lives → fewer switches between files. **3. No need to write custom CSS for typical tasks** Most UI patterns are already covered by utilities. **4. The design system is formed through the config, not endless CSS** All colors, sizes, radii and fonts are set in `tailwind.config.js` and applied through utilities. --- ### **The final explanation in one phrase** > Tailwind is utility-first because, instead of writing CSS, it lets you construct the interface from small, single-purpose utility classes that directly describe the appearance of elements.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.