Курс Tailwind CSS

Utility-first вёрстка на Tailwind v4 и Vite: дизайн-токены, переиспользуемые компоненты, тёмная тема и сборка продакшн-CSS.

Курс готовится к публикации

Материалы курса написаны и проверены, идёт подготовка к выходу на сайте: программа ниже — настоящая. Открытые курсы можно читать уже сейчас, а о запуске этого напишите — ответим, когда он появится.

Открытые курсы Спросить о запуске

Модулей: 12
Ак. часов: 72
Разделов: 81

Что нужно знать заранее. основы HTML и CSS; работа с npm разбирается в курсе.

Программа курса

12 модулей; каждый — полноценное занятие с теорией, листингами, практикой и домашним заданием.

1
Введение в Tailwind CSS
Tailwind CSS — это utility-first CSS-фреймворк, созданный Адамом Уотеном (Adam Wathan) в 2017 году…
Что такое TailwindUtility-firstУстановкаViteCDNКак работает JITПервая страница
2
Типографика и цвета
Типографика — основа любого интерфейса: большая часть содержимого сайта — текст. Tailwind даёт полный набор утилит для управления размером, начертанием, межстрочным…
Размер шрифтаНачертаниеСемейство шрифтовВыравниваниеЦветаЦветовая шкалаПрозрачностьГрадиенты
3
Отступы, размеры и границы
Отступы превращают неупорядоченный набор элементов в аккуратный интерфейс. Tailwind управляет двумя видами отступов: внутренними (padding — расстояние от рамки до…
PaddingMarginШкала отступовWidth/HeightBorderРадиусТениBox model
4
Flexbox — гибкие раскладки
Flexbox (Flexible Box Layout) — это механизм CSS для раскладки элементов вдоль одной оси: по горизонтали или по вертикали…
display:flexНаправлениеВыравниваниеjustifyitemsgapflex-wrapРеальные паттерны
5
Grid — двумерные раскладки
CSS Grid — механизм для раскладки в двух измерениях одновременно: строки и колонки…
gridgrid-colsgapcol-spanrow-spanauto-fillАдаптивные сеткиДашборд
6
Адаптивный дизайн
Адаптивный (отзывчивый) дизайн — это вёрстка, которая корректно отображается на любом экране: от телефона до 4K-монитора…
Mobile-firstБрейкпоинты sm/md/lg/xlПрефиксыContainerСкрытие элементовПаттерны
7
Состояния и интерактивность
Интерфейс должен реагировать на действия пользователя: подсвечиваться при наведении, выделяться при фокусе, меняться при нажатии…
hoverfocusactivedisabledgrouppeertransitiontransform
8
Формы
Формы — самая интерактивная часть интерфейса, и их вид сильнее всего влияет на доверие пользователя…
Поля вводаФокусЧекбоксы и радиоSelectTextareaСостояния валидацииПолная форма
9
Позиционирование и слои
Позиционирование определяет, как элемент размещается на странице и относительно чего считаются его координаты…
positionrelativeabsolutefixedstickyz-indexoverflowБейджи, модалки, dropdown
10
Кастомизация Tailwind
Tailwind 4 перенёс настройку из JavaScript-файла (tailwind.config.js в версии 3) в CSS — через директиву @theme…
@themeСвои цвета и шрифтыПроизвольные значения []@apply@layerПлагиныТёмная тема
11
Tailwind в React и Vue
До сих пор мы применяли Tailwind в чистом HTML. Но в реальных проектах разметка находится в компонентах React, Vue, Svelte…
Классы в JSXУсловные классыclsx/cnКомпонентыReact-примерыVue-примерыКонфликты классов
12
Итоговый проект — лендинг на Tailwind
Итоговый проект — адаптивный лендинг, демонстрирующий все изученные возможности Tailwind CSS…
СтруктураHeroFeaturesPricingTestimonialsFAQFooterАнимации

← Ко всем курсам