Tailwind CSS
Что это такое
Tailwind — это CSS-фреймворк, который строится вокруг утилит: вместо правил в таблице стилей вы собираете маленькие одноцелевые классы прямо в разметке — flex items-center gap-2 rounded px-3 py-1.5. Сборочный шаг обходит разметку и оставляет в итоговом файле только те классы, которые встретились.
Почему это важно
Утилитарные классы переносят в одно место решение, которое раньше делилось между двумя файлами. Больше не нужно придумывать имя для каждой обёртки и не остаётся брошенного правила, когда компонент удаляют, — а вопрос, в какой таблице стилей определён класс, снимается сам собой, потому что ответ даёт сгенерированный файл фреймворка. Компромисс столь же реален: разметка становится плотной, а чтобы переиспользовать шаблон, придётся либо повторять список классов, либо выделять компонент. Команды обычно делятся на тех, кто его любит, и тех, кто ненавидит. Честная позиция при этом такая: он подходит кодовым базам на компонентах, где есть система дизайн-токенов, и наказывает те, где её нет, — потому что значения классов и становятся дизайном.
Что в этом треке
- Мышление «сначала утилиты» (02-frontend/14-tailwind-css/01-utility-first-thinking) — почему список классов и есть компонент и когда его всё-таки стоит выделить.
- Конфигурация и дизайн-токены (02-frontend/14-tailwind-css/02-configuration-and-design-tokens) — как превратить палитру, шкалу и систему отступов в тему, из которой генерируются утилиты.
Предварительные требования
- Каскадные таблицы стилей (CSS) (02-frontend/05-css)
Что читать дальше
- Дизайн-токены (03-design-ux/41-design-tokens) — слой именования, одной из реализаций которого служит тема Tailwind.
- Sass (02-frontend/15-sass) — более старый ответ на вопрос о структуре таблицы стилей, и его стоит сравнить.
- UI-компоненты (02-frontend/12-ui-components) — точка выделения, которая не даёт списку классов повторяться повсюду.