Tailwind CSS: вопросы на собеседовании

Вопросы и ответы по Tailwind CSS: подготовка, примеры и типичные ошибки.

1. В каких типах frontend-проектов Tailwind CSS даёт реальный выигрыш, а где будет избыточен или неудачен?
   Middle· спрашивают почти всегда· полный разбор — Jobs/Boost
2. Что такое массив content в конфигурации Tailwind и почему он важен?
   Middle· спрашивают почти всегда· полный разбор — Jobs/Boost
3. Каковы лучшие практики организации Tailwind-классов в больших кодовых базах?
   Senior· спрашивают почти всегда
4. Как работает адаптивный дизайн в Tailwind? Объясните префиксы breakpoints (sm, md, lg, xl, 2xl).
   Junior· спрашивают почти всегда· полный разбор — Jobs/Boost
5. Что такое Tailwind CSS и что означает подход «utility-first»?
   Junior· спрашивают почти всегда
6. Как использовать произвольные значения (arbitrary values) в Tailwind CSS (например, w-[37px])?
   Middle
7. Как расширить или настроить стандартную тему (theme) в Tailwind?
   Middle· полный разбор — Jobs/Boost
8. Что такое варианты group и peer в Tailwind и как они работают?
   Middle· полный разбор — Jobs/Boost
9. Как сравнить Tailwind CSS с ближайшими альтернативами по DX, performance, SEO, accessibility, hiring и поддержке команды?
   Middle· полный разбор — Jobs/Boost
10. Что такое tailwind.config.js и что в нём можно настраивать?
    Middle· полный разбор — Jobs/Boost
11. Как реализовать тёмную тему (dark mode) в Tailwind CSS?
    Middle· полный разбор — Jobs/Boost
12. Как понять, что проблема в проекте связана с Tailwind CSS, а не с API, сетью, дизайном состояния или плохой архитектурой?
    Senior
13. Представьте, приложение на Tailwind CSS стало медленно открываться или часто перерисовываться. Как вы будете искать причину?
    Senior· полный разбор — Jobs/Boost
14. Какие архитектурные решения Tailwind CSS навязывает вокруг rendering, state, routing, styling, data loading или deployment?
    Middle
15. Какие production-риски есть у Tailwind CSS: hydration, bundle size, caching, accessibility, browser compatibility или observability?
    Senior· полный разбор — Jobs/Boost
16. Проект на Tailwind CSS вырос из небольшого интерфейса в большой продукт. Какие архитектурные проблемы вы ожидаете увидеть?
    Senior· полный разбор — Jobs/Boost
17. Как применять hover, focus и другие state-варианты в Tailwind?
    Middle
18. Что такое @theme в Tailwind CSS v4 и как он заменяет JS-конфиг файл?
    Middle· полный разбор — Jobs/Boost
19. Каковы компромиссы при использовании Tailwind CSS (преимущества vs недостатки)?
    Middle· полный разбор — Jobs/Boost
20. Как Tailwind удаляет неиспользуемый CSS в продакшне (purging/tree-shaking)?
    Middle
21. Чем Tailwind CSS v4 отличается от v3 (новый CSS-native подход)?
    Senior· полный разбор — Jobs/Boost
22. Чем Tailwind CSS отличается от компонентных CSS-фреймворков, таких как Bootstrap?
    Junior· полный разбор — Jobs/Boost
23. Как управлять разрастанием utility-классов в больших проектах Tailwind?
    Senior· полный разбор — Jobs/Boost
24. Как добавить пользовательские цвета в проект Tailwind?
    Junior· полный разбор — Jobs/Boost
25. В чём разница между extend и прямым переопределением темы в конфигурации Tailwind?
    Middle
26. Что такое плагин @tailwindcss/forms и что он делает?
    Middle· полный разбор — Jobs/Boost
27. Как установить и настроить Tailwind CSS в проекте?
    Junior· полный разбор — Jobs/Boost
28. Как реализовать анимации в Tailwind CSS?
    Middle· полный разбор — Jobs/Boost
29. Как интегрировать Tailwind CSS с CSS Modules или CSS-in-JS решениями?
    Senior
30. Расскажите о случае, когда вы улучшали performance, accessibility, testing или maintainability в проекте на Tailwind CSS.
    Middle
31. Что такое директива @layer в Tailwind (base, components, utilities)?
    Middle· полный разбор — Jobs/Boost
32. Что такое mobile-first подход Tailwind?
    Junior· полный разбор — Jobs/Boost
33. Как организовать дизайн-токены и multi-brand theming в Tailwind v4?
    Middle· полный разбор — Jobs/Boost
34. Как мигрировать проект с Tailwind v3 на v4 CSS-first configuration?
    Middle
35. Как использовать Tailwind CSS с компонентным фреймворком, например React или Vue?
    Middle
36. Что такое плагин @tailwindcss/typography и когда его следует использовать?
    Middle· полный разбор — Jobs/Boost
37. Что такое директива @apply и когда её следует использовать?
    Middle
38. Что такое режим JIT (Just-In-Time) в Tailwind и почему это было значимым улучшением?
    Middle· полный разбор — Jobs/Boost
39. Что такое плагины Tailwind CSS и как создать пользовательский плагин?
    Senior
40. Как работать с RTL (right-to-left) языками в Tailwind?
    Middle· полный разбор — Jobs/Boost