Чому Tailwind називають utility-first фреймворком?
Tailwind називають utility-first фреймворком, тому що його основна філософія - будувати інтерфейс із дрібних утилітарних класів, де кожен клас відповідає за одну конкретну CSS-властивість. Замість написання власних селекторів і описів стилів розробник одразу комбінує утиліти в HTML.
Що означає utility-first по суті
Замість такого підходу:
.button {
padding: 1rem;
font-weight: 600;
background: #4f46e5;
border-radius: 0.5rem;
}Tailwind пропонує робити так:
<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-класів, які напряму описують зовнішній вигляд елементів.
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.