Summary
This chapter introduces the utility-first approach, where small, single-purpose CSS utility classes are applied directly to HTML elements to compose complex styles without writing custom CSS.

General domain of usage
User interface styling in web development

Утилітарні класи в Tailwind CSS — це невеликі, однозадачні класи, які можна застосовувати безпосередньо до HTML-елементів для їх стилізації. Кожен утилітарний клас відповідає певній властивості та значенню CSS, що дозволяє швидко створювати індивідуальні дизайни без написання власного CSS.

## Основні характеристики
- Кожен утилітарний клас виконує одну функцію, наприклад, встановлює відступ, внутрішній відступ, колір або розмір шрифту;
- Можна комбінувати кілька утилітарних класів для досягнення складних стилів;
- Використання попередньо визначених утилітарних класів забезпечує послідовність стилізації у всьому проєкті;
- Tailwind надає адаптивні варіанти утилітарних класів для зручної роботи з різними розмірами екранів.

## Приклад

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+VW5kZXJzdGFuZGluZyBVdGlsaXR5IENsYXNzZXMgLSBFeGFtcGxlIDE8L3RpdGxlPgogICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuLnRhaWx3aW5kY3NzLmNvbSI+PC9zY3JpcHQ+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGRpdiBjbGFzcz0icC00IGJnLWJsdWUtNTAwIHRleHQtd2hpdGUiPgogICAgICA8aDEgY2xhc3M9InRleHQteGwgZm9udC1ib2xkIj5IZWxsbywgVGFpbHdpbmQhPC9oMT4KICAgICAgPHAgY2xhc3M9Im10LTIiPlRoaXMgaXMgYSBzaW1wbGUgZXhhbXBsZSB1c2luZyB1dGlsaXR5IGNsYXNzZXMuPC9wPgogICAgPC9kaXY+CiAgPC9ib2R5Pgo8L2h0bWw+

1. `p-4` додає внутрішній відступ 1rem (16px) з усіх сторін;
2. `bg-blue-500` встановлює колір фону на певний відтінок синього;
3. `text-white` встановлює білий колір тексту;
4. `text-xl` встановлює більший розмір шрифту;
5. `font-bold` робить текст жирним;
6. `mt-2` додає верхній зовнішній відступ 0.5rem (8px).

У наступних розділах ми детально розглянемо кожен клас. Не потрібно запам'ятовувати всі класи, показані тут.

Що таке утилітарний клас у Tailwind CSS?

Навчіться ефективно стилізувати вебсайти за допомогою Tailwind CSS — утилітарного фреймворку для швидкої розробки інтерфейсів. Дізнайтеся, як налаштувати Tailwind і застосовувати утилітарні класи для кольорів, типографіки, меж і тіней. Створюйте та стилізуйте основні компоненти, такі як кнопки, картки та форми. Опановуйте техніки компонування за допомогою відступів, flexbox і grid-утиліт. Створюйте адаптивні дизайни та налаштовуйте Tailwind відповідно до потреб проєкту.

Ознайомлення з Tailwind CSS — утилітарним фреймворком, відомим своєю гнучкістю та ефективністю у веб-стилізації. Вивчення основних переваг і філософії утилітарного підходу. Дослідження простих методів встановлення за допомогою CDN або npm/yarn.

Ознайомлення з базовими елементами Tailwind CSS, зокрема з розумінням утилітарних класів та їх застосуванням до HTML-елементів. Вивчення основних технік стилювання, таких як налаштування кольорів, меж, тіней і типографічних утиліт.

Занурення у практичні завдання зі створення та стилізації кнопок, форм і карток. Завдяки практичним вправам ви опануєте розробку цих основних UI-компонентів, удосконалюючи навички на реальних прикладах.

Ознайомлення з основними утилітами відступів у Tailwind CSS, включаючи застосування margin і padding до елементів. Вивчення використання flexbox-утиліт для керування компонуванням за допомогою налаштувань display, напрямку flex і горизонтального та вертикального вирівнювання. Дослідження grid-утиліт для створення простих, але потужних сіткових макетів із засвоєнням налаштування grid-контейнерів і елементів.

Дізнайтеся, як налаштовувати Tailwind CSS відповідно до вимог дизайну вашого проєкту та створювати адаптивні макети для різних пристроїв.

Розуміння Підходу Utility-First у Tailwind

Основні характеристики

Приклад

Пояснення