Оглавление
Tailwind CSS
CSS-фреймворк из маленьких утилит: вёрстка классами прямо в HTML, темы и адаптивность.
1.Начало работы
- Что такое Tailwind CSSПодход utility-first, чем Tailwind отличается от обычного CSS и Bootstrap и что будет в курсе.
- Tailwind прямо в браузереКак попробовать Tailwind одним тегом script, что такое Preflight и почему так не делают в настоящих проектах.
- Установка с ViteКак создать проект на Vite и подключить Tailwind CSS 4 через плагин @tailwindcss/vite.
- Установка через CLIКак собирать CSS утилитой @tailwindcss/cli без сборщика: входной файл, выходной файл и режим наблюдения.
- Как устроены имена классовСхема свойство-значение, шкала отступов, стороны, отрицательные значения и модификаторы в именах классов Tailwind.
2.Оформление элементов
- Цвета и прозрачностьПалитра Tailwind, оттенки от 50 до 950, цвета текста, фона и рамок и модификатор прозрачности.
- Текст и шрифтыРазмер, жирность и семейство шрифта, межстрочный интервал, выравнивание и обрезка длинного текста в Tailwind.
- Отступы и размерыВнутренние и внешние отступы, промежутки между соседями, ширина, высота, максимальная ширина и size-* в Tailwind.
- Рамки, скругления и тениТолщина и цвет рамки, разделители, скругление углов, тени и кольца ring в Tailwind.
- Фоны и градиентыЦвет фона, фоновое изображение, его размер и положение, линейные и радиальные градиенты в Tailwind 4.
3.Раскладка и адаптивность
- FlexboxКлассы Tailwind для flex-раскладки: направление, промежутки, выравнивание, перенос и растягивание элементов.
- GridСетки в Tailwind: колонки, промежутки, растягивание ячейки на несколько колонок и строк.
- Адаптивность: префиксы контрольных точекПодход mobile-first в Tailwind: префиксы sm, md, lg, xl, 2xl, диапазоны max-* и адаптивная сетка товаров.
- Контейнерные запросыКак в Tailwind 4 менять раскладку по ширине родителя: класс @container, варианты @sm, @md, @lg и именованные контейнеры.
4.Состояния, тёмная тема и анимации
- Наведение, фокус и другие состоянияВарианты hover, focus, focus-visible, active, disabled, first, last, odd и как их сочетать с контрольными точками.
- Варианты group и peerКак менять стиль элемента по состоянию родителя (group-hover) или соседа (peer-checked, peer-invalid) в Tailwind.
- Тёмная темаВариант dark в Tailwind: тема по настройкам системы, переключатель через класс или data-атрибут с @custom-variant.
- Переходы, трансформации и анимацииКлассы transition, duration и ease, трансформации scale, rotate и translate, готовые анимации и своя анимация через @theme.
5.Настройка и расширение
- Произвольные значения и свойстваКвадратные скобки в классах Tailwind: любые размеры и цвета, CSS-переменные, произвольные свойства и варианты.
- Настройка темы через @themeСвои цвета, шрифты и контрольные точки в Tailwind 4: директива @theme, пространства имён переменных и замена стандартной палитры.
- Свои утилиты и компонентыДирективы @utility, @layer components и @apply в Tailwind 4 и почему не стоит переносить всю вёрстку в @apply.
- Оформление формПоля ввода, списки, флажки и кнопки в Tailwind: фокус, ошибки, accent-цвет, file: и плагин @tailwindcss/forms.
- Плагин typography для длинных текстовКлассы prose из плагина @tailwindcss/typography: оформление статей и описаний из Markdown или CMS одним классом.
6.Практика
- Повторное использование стилейКак не копировать длинные списки классов: циклы, компоненты шаблонов React и Vue, частичные шаблоны бэкенда.
- Длинные списки классовКак читать и упорядочивать длинные атрибуты class: порядок групп, перенос строк, плагин Prettier для сортировки и условные классы.
- Лендинг по секциямСборка страницы магазина на Tailwind: шапка, главный экран, сетка товаров, призыв к действию и подвал.
- Панель управления магазиномСборка админ-панели на Tailwind: боковое меню, плитки с показателями и таблица заказов с адаптивностью.
- Сборка для публикацииКак Tailwind находит используемые классы, почему в итоговом CSS нет лишнего, директива @source и сборка через Vite и CLI.