intermediate

Tailwind CSS

Используйте utility-first стили, variants, design tokens, extraction и границы компонентов без потери семантики.

Tailwind — utility-first CSS на ограниченной шкале design tokens и с удалением неиспользуемых классов на сборке. Собирайте UI в разметке; повторяющиеся паттерны выносите в компоненты.

					<button class="rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 focus-visible:outline focus-visible:outline-2">
  Сохранить
</button>

Варианты (`hover:`, `md:`, `dark:`) кодируют состояние и breakpoints. Arbitrary values (`w-[37px]`) выходят за шкалу — редко.

На интервью: читаемость vs скорость, удаление мёртвого CSS, консистентность дизайна и границы component extraction.

Типовые ошибки: скопированные utility-строки как скрытая design system; arbitrary values мимо tokens; семантика теряется в «супе из div».

Компромисс: быстрая локальная сборка против тяжёлой разметки классами и дисциплины extraction.

Чеклист:

По умолчанию шкала tokens.
Повторяющийся UI — в компоненты.
Semantic HTML и focus states.
Review arbitrary values.