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

Структура HTML

Почніть з базової структури HTML.

Застосування утилітарних класів

Додавання утилітарних класів до атрибута class ваших елементів для їх стилізації.

Пояснення

1. p-4: Додає внутрішній відступ;
2. bg-gray-100: Встановлює світло-сірий колір фону;
3. rounded-lg: Додає великі заокруглені кути;
4. shadow-md: Додає середню тінь.

1. h-16: Встановлює висоту;
2. w-16: Встановлює ширину;
3. rounded-full: Робить зображення круглим;
4. mx-auto: Центрує зображення по горизонталі.

1. text-center: Центрує текст;
2. mt-4: Додає верхній відступ;
3. text-lg: Встановлює розмір шрифту;
4. font-semibold: Робить текст напівжирним;
5. text-gray-500: Встановлює сірий колір тексту.

1. mt-4: Додає верхній відступ;
2. px-4: Додає горизонтальний внутрішній відступ;
3. py-2: Додає вертикальний внутрішній відступ;
4. bg-blue-500: Встановлює синій колір фону;
5. text-white: Встановлює білий колір тексту;
6. rounded: Додає невеликі закруглені кути;
7. hover:bg-blue-700: Змінює колір фону при наведенні.