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

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

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

Приклад

Пояснення

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

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