Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке utility-клас?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Utility-клас** - це CSS-клас, який відповідає строго за одну конкретну властивість і застосовується до елемента, щоб надати йому окрему візуальну характеристику. **Ключове:** такий клас не "описує компонент", а виконує одну маленьку функцію, наприклад задає відступ, колір, шрифт або вирівнювання.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняUtility-клас - це CSS-клас, який відповідає **строго за одну конкретну властивість** і застосовується до елемента, щоб надати йому окрему візуальну характеристику. Такий клас не "описує компонент", а **виконує одну маленьку функцію** - наприклад, задає відступ, колір, шрифт або вирівнювання. --- ### **Приклад utility-класів** ```html <div class="mt-4 text-center bg-gray-200 p-2"> ``` Тут кожен клас - окрема властивість: | Клас | Що робить | |---|---| | `mt-4` | задає верхній відступ | | `text-center` | вирівнює текст | | `bg-gray-200` | встановлює фоновий колір | | `p-2` | задає внутрішній відступ | --- ### **Ознаки utility-класу** - відповідає **за одне завдання / одну CSS-властивість**; - короткий і стандартизований; - **комбінується** з іншими для оформлення елемента; - не залежить від контексту - поводиться передбачувано в будь-якому місці. --- ### **Навіщо це потрібно** Utility-підхід (наприклад, у Tailwind) дає змогу: - **швидко збирати UI** без написання власного CSS; - уникати конфліктів каскаду; - підтримувати **консистентний дизайн** (усі беруть одні й ті самі значення). --- ### **Підсумок** > Utility-клас - це маленький, атомарний CSS-клас, який задає одну властивість і слугує будівельним блоком для інтерфейсу. Разом такі класи дають змогу конструювати зовнішній вигляд елементів без створення кастомних CSS-правил.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.