Tailwind CSS & shadcn/ui

Интерактивный справочник-курс: утилитарный CSS на Tailwind v4 и готовые компоненты shadcn/ui — 22 урока, 9 справочников и 12 частых шаблонов

🎯 О курсе

Курс учит писать интерфейсы утилитами вместо самописного CSS и собирать из них полноценные компоненты. Первая половина — Tailwind CSS v4: как устроен движок, отступы, типографика, цвет, Flexbox, Grid, адаптивность, состояния и тёмная тема. Вторая половина — shadcn/ui: не библиотека компонентов, а реестр исходников, которые копируются в проект и остаются под вашим контролем.

Все демо на странице — настоящий Tailwind. Утилиты в примерах собраны официальным CLI из тех же классов, что показаны в коде, поэтому результат рядом с кодом — это именно то, что даст Tailwind в вашем проекте. Переключите тему страницы (🌙) — демо переключатся вместе с ней, как dark: в реальном приложении.

📚 Что нужно знать заранее

  • HTML и CSS на уровне курса HTML & CSS: селекторы, блочная модель, Flexbox, Grid, медиазапросы
  • Терминал: запуск команд, установка пакетов через npm
  • Основы JavaScript и импортов ES-модулей — для второй половины курса
  • Базовый React (компонент, props, JSX) — для уроков 16–22
Версии стека курса: Tailwind CSS 4.3, shadcn CLI 4.x (стиль base-nova, примитивы Base UI), React 19, Vite. Материалы уроков проверены реальным прогоном установки; расхождения с более старыми статьями в интернете — это как раз смена мажорных версий.
🛠️ Рабочее место ещё не настроено? Установка инструментов — что поставить, какими командами проверить и что делать, если не заработало.

🚀 Раздел 1: Введение (Уроки 1–3)

Зачем нужен утилитарный подход, как поставить Tailwind в проект и что делает его движок.

Урок 01 — Utility-first: что такое Tailwind и зачем

Проблема имён классов и «мёртвого» CSS, утилиты вместо семантических классов, честные минусы подхода

🎯 Начальная

Урок 02 — Установка: Vite, CLI, PostCSS, браузерная сборка

Четыре способа подключить Tailwind v4, структура проекта, первый запуск и типичные ошибки установки

🎯 Начальная

Урок 03 — Как устроен движок: сканирование, @theme, слои

Почему классы нельзя склеивать из строк, что такое @source, @theme, @layer и откуда берутся CSS-переменные

🎯 Начальная

🧱 Раздел 2: Базовые утилиты (Уроки 4–7)

Четыре группы утилит, из которых состоит 80% реальной разметки.

Урок 04 — Отступы и размеры: p/m/gap, w/h/size

Шкала --spacing, логические свойства px/py/ps/pe, space-*, произвольные значения

🎯 Начальная

Урок 05 — Типографика: text, font, leading, tracking

Размеры с парным line-height, начертания, выравнивание, обрезка текста и вертикальный ритм

🎯 Начальная

Урок 06 — Цвет: палитра, bg/text/border, прозрачность

22 оттенка × 11 ступеней, OKLCH, модификатор /50, градиенты и контраст текста

🎯 Начальная

Урок 07 — Рамки, скругления, тени и ring

border, rounded, shadow, ring, outline и как из них собирается «карточка»

🎯 Начальная

📐 Раздел 3: Раскладка (Уроки 8–11)

Flexbox, Grid, позиционирование и адаптивность в утилитарной записи.

Урок 08 — display и Flexbox

flex, направление, выравнивание по осям, gap, flex-1, перенос и типичные схемы шапки

🎯 Средняя

Урок 09 — CSS Grid в утилитах

grid-cols, col-span, auto-rows, произвольные шаблоны и адаптивные сетки карточек

🎯 Средняя

Урок 10 — Позиционирование, z-index, overflow

relative/absolute/fixed/sticky, inset, слои, обрезка контента и прокрутка

🎯 Средняя

Урок 11 — Адаптивность: брейкпоинты и container queries

Mobile-first, sm:…2xl:, диапазоны max-md:, @container и адаптивная типографика

🎯 Средняя

🎛️ Раздел 4: Состояния и темы (Уроки 12–14)

Интерактивные состояния, тёмная тема и движение интерфейса.

Урок 12 — Варианты: hover, focus, group, peer, has

Модификаторы состояний, зависимость от родителя и соседа, data-* и aria-* варианты

🎯 Средняя

Урок 13 — Тёмная тема и кастомизация @theme

dark:, переключение по классу, свои токены, семантические переменные вместо жёстких цветов

🎯 Средняя

Урок 14 — Переходы, трансформации, анимации

transition, duration, ease, scale/rotate/translate, animate-* и уважение к prefers-reduced-motion

🎯 Средняя

🧹 Раздел 5: Организация кода (Урок 15)

Что делать, когда классов в разметке становится слишком много.

Урок 15 — @apply, @utility, cn(), tailwind-merge, cva

Когда извлекать компонент, а когда — утилиту; порядок классов, конфликты и варианты компонентов

🎯 Средняя

🧩 Раздел 6: shadcn/ui (Уроки 16–21)

Реестр компонентов вместо библиотеки: установка, анатомия, темизация, формы и оверлеи.

Урок 16 — Философия shadcn/ui: код, а не зависимость

Чем реестр отличается от UI-библиотеки, роль примитивов Base UI, доступность и цена владения кодом

🎯 Средняя

Урок 17 — Установка: CLI, components.json, структура

Реальный прогон init и add, разбор всех полей конфигурации и алиасов путей

🎯 Средняя

Урок 18 — Анатомия компонента: Button, cva, data-slot

Построчный разбор исходника Button: варианты, размеры, состояния, render вместо asChild

🎯 Продвинутая

Урок 19 — Темизация: CSS-переменные, OKLCH, свой бренд

Пары background/foreground, тёмная тема, добавление собственного семантического токена

🎯 Продвинутая

Урок 20 — Формы: Input, Label, Select, Checkbox, валидация

Доступная разметка формы, состояния ошибок через aria-invalid, схема zod и react-hook-form

🎯 Продвинутая

Урок 21 — Оверлеи и навигация: Dialog, Sheet, Menu, Tabs

Порталы, фокус-ловушка, состояния data-[state], анимации входа и выхода

🎯 Продвинутая

🏁 Раздел 7: Итоговый проект (Урок 22)

Сборка дашборда целиком: каркас, сайдбар, метрики, таблица, адаптивность и чек-лист качества.

Урок 22 — Проект: дашборд на Tailwind + shadcn/ui

От пустого проекта до рабочего интерфейса: layout, компоненты, тёмная тема, ревью по чек-листу

🎯 Продвинутая

📚 Справочники предмета

Открываются без сервера. Пригодятся во время работы: держите вкладку рядом с редактором.

Установка инструментов

Node.js, VS Code, расширение Tailwind CSS IntelliSense, Prettier — что поставить до первого урока

Шпаргалка утилит

Все основные группы утилит Tailwind с соответствием «класс → CSS» и примерами

Справочник модификаторов

Состояния, брейкпоинты, group/peer, data-*, aria-*, has-*, произвольные варианты

Палитра и OKLCH

Полная палитра с образцами цвета, ступени 50–950, правила выбора пар текст/фон

Шкалы: отступы, размеры, типографика

Таблицы значений --spacing, размеров шрифта, скруглений, теней и брейкпоинтов

Миграция Tailwind v3 → v4

Что переехало из tailwind.config.js в CSS, переименованные утилиты, чек-лист перехода

Каталог компонентов shadcn/ui

Компоненты реестра: назначение, команда установки, зависимости и когда применять

CLI: Tailwind и shadcn

Все ключи @tailwindcss/cli и команд shadcn init/add/build с примерами

Чек-лист качества разметки

Что проверить перед коммитом: порядок классов, доступность, тёмная тема, адаптивность

Глоссарий

Utility-first, вариант, примитив, реестр, токен, OKLCH, preflight и другие термины

🧩 Частые шаблоны

Готовые куски интерфейса с живым результатом: копируйте разметку и меняйте под себя.

Все шаблоны — оглавление

12 типовых блоков интерфейса: от кнопки до каркаса дашборда

Карточка

Базовая карточка, карточка с медиа, кликабельная карточка, состояние загрузки

Кнопки

Варианты, размеры, иконки, состояния загрузки и группы кнопок

Шапка сайта

Логотип, меню, действия, липкая шапка и мобильное меню

Первый экран

Заголовок, подзаголовок, кнопки действий, фон с градиентом

Форма

Поля, подписи, подсказки, ошибки, кнопка отправки и доступность

Сетка карточек

Адаптивная галерея, соотношение сторон, «плитка» разной высоты

Каркас дашборда

Сайдбар + шапка + контент, липкие области и прокрутка

Таблица данных

Заголовки, зебра, выравнивание чисел, статусы и прокрутка на мобильных

Модальное окно

Подложка, центрирование, анимация появления, шапка и футер диалога

Вкладки

Активная вкладка, подчёркивание, клавиатурная навигация

Тарифы

Три плана, выделение рекомендованного, список возможностей

Пустое состояние

Иконка, объяснение, действие — что показать, когда данных нет