Урок 15. Задания

Задание 1. Компонент Badge

Соберите компонент бейджа с вариантами neutral, success, warning, danger и двумя размерами. Обязательно: внешний className должен переопределять базовые классы.

Задание 2. Найти конфликт

Объясните, что окажется в атрибуте и что увидит пользователь:

<Button className="px-8 bg-emerald-600" />
// внутри: <button className={`px-4 py-2 bg-slate-900 ${className}`} />

Затем перепишите компонент так, чтобы поведение стало предсказуемым.

Задание 3. Утилита или компонент?

Для каждого случая решите, что уместнее — @utility, компонент или ничего: (а) тонкая полоса прокрутки; (б) карточка товара; (в) обрезка текста в две строки; (г) шапка страницы; (д) градиентная подложка, используемая в трёх местах.

Вопрос 1

Когда стоит извлекать компонент?

Вопрос 2

Что делает twMerge("px-4", "px-6")?

Вопрос 3

Чем @utility лучше класса с @apply?

Вопрос 4

Зачем нужен prettier-plugin-tailwindcss?