Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Чому Tailwind називають utility-first фреймворком?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

Tailwind називають **utility-first фреймворком**, тому що його основна філософія - будувати інтерфейс із **дрібних утилітарних класів**, де кожен клас відповідає за *одну конкретну CSS-властивість*. Замість написання власних селекторів і описів стилів розробник одразу комбінує утиліти в HTML.

---

### **Що означає utility-first по суті**

Замість такого підходу:

```css
.button {
  padding: 1rem;
  font-weight: 600;
  background: #4f46e5;
  border-radius: 0.5rem;
}
```

Tailwind пропонує робити так:

```html
<button class="px-4 py-3 font-semibold bg-indigo-600 rounded-lg">
  Click
</button>
```

Тобто зовнішній вигляд компонента **описується набором конкретних утиліт**, а не окремим CSS-класом.

---

### **Головні ознаки utility-first-підходу в Tailwind**

**1. Кожен клас = одна властивість**
`mt-4`, `flex`, `text-xl`, `rounded` - усе максимально атомарне.

**2. Стилі задаються прямо в розмітці**
Стиль описується там само, де перебуває компонент → менше перемикань між файлами.

**3. Немає потреби писати кастомний CSS для типових завдань**
Більшість UI-патернів уже покрита утилітами.

**4. Дизайн-система формується через конфіг, а не через нескінченний CSS**
Усі кольори, розміри, радіуси, шрифти задаються в `tailwind.config.js`, а застосовуються через утиліти.

---

### **Підсумкове пояснення в одній фразі**

> Tailwind - utility-first, тому що замість написання CSS пропонує конструювати інтерфейс із невеликих, однофункціональних utility-класів, які напряму описують зовнішній вигляд елементів.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати190 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.