Вопрос с собеседования · Frontend

Что такое утилитарный CSS (Tailwind) и какие у него плюсы и минусы?

JuniorВёрстка и CSS
Ещё спрашивают так:
  • Почему в Tailwind столько классов в разметке?
Коротко

Tailwind — набор маленьких классов-утилит (flex, p-4, text-lg, md:grid-cols-2), из которых стиль собирается прямо в разметке. Плюсы: не нужно придумывать имена, стили не разрастаются (в сборку попадают только используемые классы), ограниченная шкала отступов и цветов из конфигурации поддерживает единообразие, быстро вносить изменения. Минусы: длинные списки классов, разметка смешана со стилями, нужна дисциплина выносить повторы в компоненты.

  • Повторяющиеся сочетания — в компонент, а не копировать
  • Конфигурация Tailwind = токены дизайн-системы
  • Хорошо сочетается с компонентными фреймворками

Подробно

<button class="rounded-lg bg-indigo-600 px-4 py-2 text-white hover:bg-indigo-500">Купить</button>

Что хотят услышать

  • Идея утилитарных классов.
  • Плюсы: имена, размер CSS, шкалы.
  • Минусы и выделение компонентов.

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ
  • ✗Tailwind добавляет в сборку все свои классы целиком, поэтому CSS весит мегабайты
  • ✗Tailwind запрещает компоненты
  • ✗Tailwind — это препроцессор вроде Sass
  • ✓Стили из классов-утилит в разметке: не нужно придумывать имена, но списки классов длинные

Связанные вопросы

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования