Tailwind — готовые блоки

НЕ ОБЯЗАТЕЛЬНО ДЛЯ НОВИЧКОВ

Приветствую! Здесь вы наверняка найдете, что ищете. Примеры в лаборатории рассчитаны на то, что мы разбираем что-то конкретное.

Текущая статья посвящена примерам: Tailwind CSS с подробным разбором классов: карточка по центру, кнопки, navbar, grid, форма входа, hero, pricing. Готовый HTML.

Поэтому за теорией по текущей теме вам — в энциклопедию. Если ещё не погружались, то маршрут прост:

Обязательно пройдитесь.

А теперь приступим к нашему предмету.

Теория и соседние материалы

Flexbox и CSS Grid

Практические рекомендации по CSS

Подключение стилей и CDN

HTML — о разделе

CSS — о разделе

React — экосистема и стилизация

HTML + CSS — готовые макеты

CSS-анимации — готовые эффекты.

Основы Tailwind

С чего начать

Теория по Flex/Grid — отдельная глава.

Подключение CSS через CDN — Подключение стилей.

Чистые макеты — HTML + CSS — готовые макеты.

Анимации — CSS-анимации.

В React-проектах Tailwind часто идёт с Next.js — экосистема React.

Вставьте любой пример из статьи в редактор — предпросмотр обновится через пару секунд. В пресетах редактора есть пункт Tailwind с подключённым CDN.

Что здесь есть — быстрый поиск

Тема	Раздел
tailwind карточка по центру / center div	Карточка по центру экрана
tailwind button / кнопки	Кнопки — основные варианты
tailwind badge / статус	Бейджи и метки статуса
tailwind alert	Алерт — уведомление
tailwind avatar / профиль	Аватар и строка профиля
tailwind header footer layout	Шапка, контент и подвал
tailwind grid cards / сетка	Адаптивная сетка карточек
tailwind sticky navbar	Навигация с липкой шапкой
tailwind login form	Вход по центру
tailwind contact form	Контактная форма
tailwind hero section	Hero — первый экран
tailwind pricing table	Тарифы (pricing)
tailwind dark mode	Тёмная тема
tailwind hover card	Карточка с hover-эффектом

Базовые термины

Термин	Простыми словами
Utility-first	Стили задаются готовыми классами (`p-4`, `text-center`), а не отдельным CSS-файлом
Utility-класс	Одна «мелкая» задача: отступ, цвет, размер шрифта, flex-выравнивание
Префикс breakpoint	`sm:`, `md:`, `lg:` — класс включается от заданной ширины экрана
Spacing scale	Шаг отступов: `1` = 0.25rem (4px), `4` = 1rem (16px), `8` = 2rem
CDN Play	Скрипт `cdn.tailwindcss.com` — Tailwind в браузере без сборки; удобно для учёбы
Build (CLI / Vite)	В реальном проекте Tailwind компилируется и «вырезает» неиспользуемые классы
`@apply`	Сборка нескольких utility в один именованный класс (в `<style>` или CSS-файле)

Порядок действий

Скопируйте весь блок кода (от <!DOCTYPE html> до </html>).
Сохраните как tailwind.html (или index.html) и откройте в Chrome / Edge / Firefox.
Меняйте один класс за раз — bg-blue-500 → bg-emerald-500, p-4 → p-8.
Если сломали — верните исходник из статьи.

CDN и продакшен

Скрипт cdn.tailwindcss.com подходит для уроков, домашки и прототипа. В боевом сайте Tailwind подключают через сборку (PostCSS, Vite, Next.js), чтобы контролировать размер CSS и версию. Для учебной работы CDN достаточно.

Сначала основы CSS

Tailwind ускоряет вёрстку, когда вы уже понимаете Flexbox, Grid и блочную модель. Если классы кажутся «магией» — начните с готовых макетов на чистом CSS.

Длинная строка utility-классов

Tailwind пишут в одну строку в атрибуте class. Читайте слева направо: каждый фрагмент через пробел — отдельное правило.

Пример:

<button class="mt-4 w-full rounded-lg bg-indigo-600 px-4 py-2.5 font-semibold text-white hover:bg-indigo-700 transition-colors">

Класс	Эквивалент в CSS (упрощённо)	Смысл
`mt-4`	`margin-top: 1rem`	Отступ сверху от предыдущего элемента
`w-full`	`width: 100%`	Кнопка на всю ширину родителя
`rounded-lg`	`border-radius: 0.5rem`	Скруглённые углы
`bg-indigo-600`	фон `#4f46e5`	Основной цвет кнопки
`px-4`	`padding-left/right: 1rem`	Горизонтальные «подушки» текста
`py-2.5`	`padding-top/bottom: 0.625rem`	Вертикальные «подушки»
`font-semibold`	`font-weight: 600`	Полужирный текст
`text-white`	`color: white`	Белый текст на тёмном фоне
`hover:bg-indigo-700`	при `:hover` фон темнее	Реакция на наведение
`transition-colors`	плавная смена цвета	Кнопка меняет цвет не рывком

Порядок классов не важен — браузер применит все. В команде их часто сортируют «логически» (layout → размер → цвет → hover), но это для людей, не для CSS.

Шкала отступов (spacing)

Число в p-4, mt-2, gap-6 умножается на 0.25rem (4px при стандартном шрифте 16px):

Класс	rem	px (≈)
`1`	0.25	4
`2`	0.5	8
`4`	1	16
`6`	1.5	24
`8`	2	32

mt-2 — margin-top 8px. p-6 — padding 24px со всех сторон.

Breakpoint — когда включается `sm:`, `md:`, `lg:`

Tailwind использует mobile-first: без префикса стиль для телефона, с префиксом — от указанной ширины и шире.

Префикс	Минимальная ширина	Типичное устройство
(нет)	0	телефон
`sm:`	640px	большой телефон, маленький планшет
`md:`	768px	планшет
`lg:`	1024px	ноутбук
`xl:`	1280px	широкий монитор

Пример: grid sm:grid-cols-2 lg:grid-cols-3 — на телефоне одна колонка, от 640px две, от 1024px три.

Цвета — число после названия

slate-500, indigo-600, emerald-100 — одна палитра, разная насыщенность:

Число	Обычно
`50`–`200`	очень светлый фон, бейджи
`500`–`600`	основной цвет кнопок, акцентов
`800`–`900`	тёмный текст на светлом фоне

Пара bg-emerald-100 + text-emerald-800 — светлая «таблетка» статуса с читаемым текстом.

Обязательный каркас

Любой пример ниже собирается на этом фундаменте.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tailwind-блок</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-dvh bg-slate-50 text-slate-800 antialiased">
  <!-- сюда разметка с utility-классами -->
</body>
</html>

Разбор по строкам.

Фрагмент	Смысл
`<!DOCTYPE html>`	Режим HTML5 — страница рисуется предсказуемо
`lang="ru"`	Язык для скринридеров и переносов
`<meta charset="UTF-8">`	Кириллица отображается правильно
`viewport` + `width=device-width`	На телефоне ширина = экран, без «уменьшенного десктопа»
`<script src="https://cdn.tailwindcss.com">`	Подключает Tailwind: сканирует HTML и генерирует CSS
`min-h-dvh` на `body`	Страница минимум на всю высоту окна
`bg-slate-50`	Светло-серый фон «страницы»
`text-slate-800`	Тёмно-серый текст по умолчанию
`antialiased`	Сглаживание шрифтов

Типичные ошибки.

Забыли скрипт CDN — голый HTML без стилей.
Классы написали в <style> без @apply — CDN их не подхватит.
Нет viewport — на телефоне всё мелкое.

Кастомизация (свой цвет бренда):

<script>
  tailwind.config = {
    theme: {
      extend: {
        colors: { brand: '#4361ee' },
      },
    },
  };
</script>

Вставьте после cdn.tailwindcss.com, используйте bg-brand, text-brand.

Стартовые блоки

Простые фрагменты, которые чаще всего ищут в интернете.

Карточка по центру экрана

Задача. Окно входа, сообщение «скоро откроемся», одна карточка ровно по центру экрана — классический запрос «tailwind center div».

Разбор — body (центрирование).

Класс	Зачем здесь
`min-h-dvh`	Высота body = высота окна; иначе «центр» будет только вокруг текста
`flex`	Включает Flexbox на body
`items-center`	Вертикальное выравнивание по центру (= `align-items: center`)
`justify-center`	Горизонтальное выравнивание по центру (= `justify-content: center`)
`bg-indigo-50`	Светлый фиолетовый фон страницы — карточка визуально «отделена»
`p-4`	На узком телефоне карточка не прилипает к краям

Разбор — article (карточка).

Класс	Зачем здесь
`w-full max-w-sm`	На телефоне — вся ширина; на ПК — не шире ~384px
`rounded-xl`	Скругление углов — «карточка», а не прямоугольник
`bg-white`	Белая «плашка» на цветном фоне
`p-6`	Внутренние отступы — текст не прижат к краям
`shadow-lg`	Тень — карточка «парит» над фоном

Разбор — текст и кнопка.

Элемент	Классы	Смысл
`h1`	`text-xl font-semibold text-slate-900`	Крупный заголовок, почти чёрный
`p`	`mt-2 text-slate-600`	Отступ сверху 8px, серый подзаголовок
`button`	`mt-4 w-full … hover:bg-indigo-700 transition-colors`	Кнопка на всю ширину, темнеет при наведении

HTML. <article> — самостоятельный блок контента (лучше для семантики, чем голый <div>).

Аналог на чистом CSS — центрированная карточка в HTML + CSS — готовые макеты. Там display: grid; place-items: center — тот же эффект, другой синтаксис.

Типичные ошибки.

Ставят h-screen вместо min-h-dvh на телефоне — лишняя прокрутка из‑за адресной строки.
Центрируют через absolute top-1/2 left-1/2 без -translate — блок съезжает.
Забывают p-4 на body — карточка впритык к краям экрана.

Попробуйте сами. Замените items-center на items-start — карточка прижмётся к верху. Уберите shadow-lg — плоский дизайн.

Кнопки — основные варианты

Задача. Набор кнопок для интерфейса: главное действие, второстепенное, контур, удаление, неактивная.

Разбор — обёртка.

Класс	Смысл
`mx-auto max-w-lg`	Блок кнопок по центру, ширина до ~512px
`flex flex-wrap gap-3`	Кнопки в ряд; на узком экране переносятся; зазор 12px

Разбор — типы кнопок.

Вариант	Ключевые классы	Когда использовать
Primary	`bg-indigo-600 text-white hover:bg-indigo-700`	Главное действие: «Сохранить», «Войти»
Secondary	`bg-slate-200 text-slate-800`	Второстепенное: «Отмена», «Назад»
Outline	`border border-indigo-600 text-indigo-600 hover:bg-indigo-50`	Менее акцентное, но заметное
Danger	`bg-red-600 hover:bg-red-700`	Удаление, необратимые действия
Disabled	`disabled cursor-not-allowed bg-slate-300 text-slate-500`	Действие недоступно

Общий каркас кнопки: rounded-lg px-4 py-2 font-medium — скругление, горизонтальные/вертикальные отступы, начертание.

Типичные ошибки.

Красную кнопку для обычного «ОК» — пользователь пугается.
Нет hover: — интерфейс кажется «мертвым».
disabled без cursor-not-allowed — курсор «рука», хотя нажать нельзя.

Попробуйте сами. Скопируйте классы Primary на все кнопки — исчезнет визуальная иерархия.

Бейджи и метки статуса

Задача. Маленькие «таблетки» статуса: активен, ожидание, ошибка, черновик — в таблицах, карточках, списках задач.

Разбор одного бейджа (на примере «Активен»):

Класс	Смысл
`rounded-full`	Полностью круглые края — форма «таблетки»
`bg-emerald-100`	Очень светлый зелёный фон
`text-emerald-800`	Тёмно-зелёный текст — контраст и читаемость
`px-3 py-1`	Компактные отступы — бейдж не огромный
`text-sm font-medium`	Мелкий, но чёткий текст

Паттерн. Светлый фон *-100 + тёмный текст *-800 одного цвета — стандарт Tailwind для статусов.

Типичные ошибки.

bg-emerald-500 + text-white на мелком бейдже — слишком «кричащий» акцент для таблицы.
Забывают text-sm — бейдж раздувается до размера кнопки.

Попробуйте сами. Замените rounded-full на rounded-md — прямоугольные метки вместо «таблеток».

Алерт — уведомление

Задача. Блок подсказки или предупреждения над формой или в углу страницы.

Разбор.

Элемент	Классы	Смысл
Обёртка	`space-y-3`	Вертикальный зазор 12px между алертами без margin на каждом
Подсказка	`border-sky-200 bg-sky-50 text-sky-900`	Голубая «спокойная» палитра
Предупреждение	`border-amber-200 bg-amber-50`	Жёлто-янтарная — привлекает внимание
Заголовок	`font-semibold`	Жирная первая строка
Текст	`mt-1 text-sm`	Мелкий абзац под заголовком

Доступность. role="status" — нейтральное сообщение. role="alert" — важное, скринридер может озвучить сразу.

Типичные ошибки. Красный фон для обычной подсказки — пользователь думает, что что-то сломалось.

Аватар и строка профиля

Задача. Строка «фото + имя + email» в шапке, списке чатов, комментариях.

Разбор.

Блок	Классы	Смысл
Строка	`flex items-center gap-3`	Аватар и текст в ряд, по вертикали по центру, зазор 12px
Круг	`h-12 w-12 shrink-0 rounded-full`	Фиксированный круг 48×48px; `shrink-0` — не сжимается при длинном имени
Инициалы	`flex items-center justify-center`	Буквы «АИ» ровно по центру круга
Имя	`font-semibold text-slate-900`	Основная строка
Email	`text-sm text-slate-500`	Вторичная, мельче и светлее

Типичные ошибки. Без shrink-0 длинное имя сжимает аватар до овала.

Попробуйте сами. Подставьте <img class="h-12 w-12 shrink-0 rounded-full object-cover" src="…"> вместо div с буквами — тот же layout.

Макеты страницы

Задача. Классическая страница: шапка сверху, текст посередине, подвал внизу окна, даже если текста мало. Запрос «tailwind footer bottom» / «tailwind layout».

Разбор — главная идея.

Блок	Классы	Что происходит
`body`	`flex flex-col min-h-dvh`	Три зоны столбиком на высоту окна
`main`	`flex-1`	Средняя часть растягивается и выталкивает footer вниз
`header` inner	`flex justify-between items-center`	Логотип слева, меню справа
`nav`	`flex flex-wrap gap-4`	Ссылки в ряд, на телефоне переносятся
`main`	`max-w-3xl mx-auto`	Текст не на всю ширину 4K-монитора

Аналог на CSS — шапка и подвал в HTML + CSS — готовые макеты.

Типичные ошибки.

position: fixed на footer — перекрывает текст при прокрутке.
Нет min-h-dvh — при коротком тексте подвал «всплывает» вверх.
Нет flex-1 на main — footer идёт сразу под текстом, а не внизу экрана.

Попробуйте сами. Добавьте десять <p> в main — footer уйдёт за нижний край, появится прокрутка (нормально).

Адаптивная сетка карточек

Задача. Каталог, галерея, новости — колонки сами перестраиваются: 1 → 2 → 3.

Разбор — сетка.

Класс	Ширина экрана	Колонок
`grid gap-4`	любая	1 (по умолчанию)
`sm:grid-cols-2`	от 640px	2
`lg:grid-cols-3`	от 1024px	3

gap-4 — 16px между карточками и по вертикали, и по горизонтали. Удобнее, чем margin на каждой карточке.

Разбор — карточка. border border-slate-200 — тонкая рамка; shadow-sm — лёгкая тень; p-4 — внутренний отступ.

Аналог на CSS — адаптивная сетка в HTML + CSS — готовые макеты с auto-fit и minmax.

Типичные ошибки.

grid-cols-3 без префикса — на телефоне три узких полоски.
grid-cols-4 «навсегда» — на планшете карточки слишком узкие.

Попробуйте сами. Сузьте окно браузера — колонки перестроятся. Добавьте пятую карточку — сетка пересчитается сама.

Навигация с липкой шапкой

Задача. Меню остаётся сверху при прокрутке длинной статьи. Запрос «tailwind sticky header» / «tailwind navbar».

Разбор — sticky-шапка.

Класс	Эквивалент / смысл
`sticky top-0`	`position: sticky; top: 0` — при скролле «прилипает» к верху
`z-10`	Рисуется поверх текста, а не под ним
`bg-white/90`	Белый фон с 90% непрозрачности — текст под шапкой слегка просвечивает
`backdrop-blur`	Размытие фона за шапкой — эффект «матового стекла»
`border-b border-slate-200`	Тонкая линия снизу — отделяет от контента

Разбор — контент. space-y-4 — одинаковый зазор 16px между всеми абзацами в main.

Типичные ошибки. fixed вместо sticky без отступа у main — первые строки текста прячутся под шапкой.

Попробуйте сами. Уберите backdrop-blur — шапка станет просто полупрозрачной без размытия.

Формы

Вход по центру

Задача. Страница логина для сайта, LMS, личного кабинета.

Разбор — форма.

Класс	Смысл
`space-y-4` на `<form>`	Между заголовком, полями и кнопкой — зазор 16px
`block` на `<label>`	Label занимает всю ширину — подпись над полем
`mt-1` на `<input>`	4px между подписью «Email» и полем ввода

Разбор — поле ввода.

Класс	Смысл
`w-full`	Поле на всю ширину формы
`border border-slate-300`	Серая рамка в обычном состоянии
`rounded-lg px-3 py-2`	Скругление и внутренние отступы
`focus:outline-none`	Убирает стандартный синий контур браузера
`focus:ring-2 focus:ring-indigo-200`	Своё «кольцо» фокуса — видно при Tab с клавиатуры
`focus:border-indigo-500`	Рамка синеет при фокусе

HTML. required, type="email", minlength="4" — базовая проверка браузером без JavaScript.

Типичные ошибки. Нет focus:ring — при навигации Tab не видно, какое поле активно.

Попробуйте сами. Уберите space-y-4 и добавьте mb-4 на каждый label — тот же результат, но больше классов.

Контактная форма в две колонки

Задача. Имя и email в один ряд на широком экране, столбиком на телефоне.

Разбор.

Блок	Классы	Смысл
Обёртка полей	`grid gap-4 md:grid-cols-2`	До 768px — столбик; от 768px — «Имя» и «Email» в два столбца
Textarea	`rows="4"` + те же классы, что у input	Многострочное поле в том же стиле
Кнопка	`px-5` вместо `w-full`	Кнопка по ширине текста, не на всю форму

Попробуйте сами. Замените md:grid-cols-2 на sm:grid-cols-2 — две колонки включатся раньше (от 640px).

Секции лендинга

Блоки для одностраничного сайта: курс, клуб, стартап, портфолио.

Hero — первый экран

Задача. Первый экран лендинга: заголовок, подзаголовок, две кнопки.

Разбор.

Элемент	Классы	Смысл
`section`	`min-h-dvh flex flex-col items-center justify-center`	Блок на весь экран, контент по центру
Бейдж «Новый курс»	`rounded-full bg-indigo-500/20`	«Таблетка»; `/20` = 20% непрозрачности фона
`h1`	`text-4xl sm:text-5xl tracking-tight`	Крупный заголовок; на широком экране ещё крупнее; буквы чуть плотнее
Подзаголовок	`max-w-xl text-lg text-slate-300`	Не растягивается на всю ширину — удобно читать
Кнопки	`flex flex-wrap justify-center gap-3`	В ряд по центру; на узком экране переносятся

Типичные ошибки. Белый текст на bg-slate-700 без контраста — плохо читается. Здесь фон slate-900 — достаточный контраст.

Три преимущества (feature grid)

Задача. Блок «Почему мы» с тремя карточками.

Разбор. md:grid-cols-3 — три равные колонки от 768px. mt-8 под заголовком секции — «воздух» между title и карточками. aria-hidden="true" на emoji — декор, скринридер не озвучивает.

Попробуйте сами. Замените emoji на <img class="h-10 w-10"> — структура та же.

Тарифы (pricing)

Задача. Два тарифа рядом, один выделен как «Популярный».

Разбор — выделение Pro.

Приём	Классы	Эффект
Рамка	`border-2 border-indigo-600` vs `border`	Pro визуально «толще»
Тень	`shadow-md` vs `shadow-sm`	Pro чуть выше над фоном
Метка	`uppercase tracking-wide text-xs`	«ПОПУЛЯРНЫЙ» мелкими caps
Кнопка	filled vs outline	Pro — главное действие

space-y-2 на <ul> — отступ между <li> без margin на каждом пункте.

Статистика в одну строку

Задача. Цифры доверия: ученики, уроки, рейтинг.

Разбор. text-center — цифра и подпись по центру колонки. text-indigo-100 на подписи — светлее белого, вторичный текст на цветном фоне. sm:grid-cols-3 — на телефоне столбик, от 640px три колонки в ряд.

Отзыв (testimonial)

Задача. Цитата ученика с аватаром — блок доверия на лендинге.

Разбор. <blockquote> — семантика цитаты. cite с not-italic — имя автора без курсива по умолчанию. block на второй <span> — «10 класс» с новой строки под именем.

Интерактив и тёмная тема

Карточка с hover-эффектом

Задача. Карточка проекта в портфолио — реагирует на наведение: приподнимается, меняет тень и цвет заголовка.

Разбор — паттерн group.

Класс	Где	Смысл
`group`	на `<article>`	Помечает «группу» для hover-дочерних
`hover:-translate-y-1`	на `<article>`	При наведении карточка сдвигается на 4px вверх
`hover:shadow-lg`	на `<article>`	Тень усиливается
`transition`	на article и div	Изменения плавные, не рывком
`group-hover:text-indigo-600`	на `<h2>`	Заголовок синееет, когда курсор где угодно на карточке
`group-hover:from-indigo-500`	на div с градиентом	Градиент темнеет вместе с hover карточки

Почему group. Без него пришлось бы вешать hover: только на каждый элемент отдельно — заголовок не менялся бы при наведении на картинку.

Типичные ошибки. hover:scale-110 на большой карточке — соседние элементы «прыгают». Лучше небольшой -translate-y-1.

Тёмная тема через класс `dark`

Задача. Переключатель светлой и тёмной темы.

Разбор.

Часть	Смысл
`tailwind.config = { darkMode: 'class' }`	Тёмные стили включаются классом `dark` на предке, а не автоматически по системе
`class="dark"` на `<html>`	Стартовая тёмная тема
`bg-white dark:bg-slate-900`	Светлый фон по умолчанию; при `.dark` — тёмный
`text-slate-600 dark:text-slate-400`	Текст светлеет в тёмной теме
`onclick="…classList.toggle('dark')"`	Кнопка переключает класс на `<html>`

Попробуйте сами. Уберите darkMode: 'class' — префиксы dark: перестанут работать на CDN.

Шаблоны для экспериментов

Фрагменты без полного HTML — вставляйте в <body> готового каркаса.

Универсальная карточка

<article class="rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
  <h2 class="text-lg font-semibold text-slate-900">Заголовок</h2>
  <p class="mt-2 text-sm text-slate-600">Текст карточки.</p>
  <a href="#" class="mt-4 inline-block text-sm font-medium text-indigo-600 hover:text-indigo-800">
    Подробнее →
  </a>
</article>

Разбор. inline-block на ссылке — кликабельная область только вокруг текста, а не на всю ширину. hover:text-indigo-800 — ссылка темнеет при наведении.

Контейнер страницы

<div class="mx-auto w-full max-w-5xl px-4 sm:px-6 lg:px-8">
  <!-- контент -->
</div>

Класс	Смысл
`mx-auto`	Блок по центру горизонтали
`max-w-5xl`	Не шире ~1024px — удобно читать
`px-4 sm:px-6 lg:px-8`	Боковые отступы растут на больших экранах

Сборка классов через `@apply` (CDN)

Если одна комбинация повторяется десять раз:

<style type="text/tailwindcss">
  @layer components {
    .btn-primary {
      @apply rounded-lg bg-indigo-600 px-4 py-2 font-semibold text-white hover:bg-indigo-700 transition-colors;
    }
  }
</style>
<button type="button" class="btn-primary">Действие</button>

Смысл. @apply «склеивает» utility в один класс .btn-primary. В учебном файле на CDN удобно; в большом проекте чаще повторяют utility в JSX или используют компоненты.

Bento-сетка (разные размеры ячеек)

Задача. Мозаика как в iOS / Windows 11 — ячейки разного размера.

Разбор.

Класс	Смысл
`auto-rows-[8rem]`	Каждая строка сетки минимум 128px (произвольное значение в `[ ]`)
`lg:grid-cols-4`	На большом экране 4 колонки
`lg:col-span-2 lg:row-span-2`	«Большой» блок занимает 2×2 ячейки
`sm:col-span-2`	«Широкий» — две колонки на среднем экране

Сравнение с чистым CSS

Тот же макет «карточка по центру» без Tailwind — HTML + CSS — готовые макеты. Utility-классы короче по строкам HTML, но длиннее в атрибуте class. Отдельный CSS-файл проще искать по проекту. Для учёбы удобно иметь обе версии под рукой.

Частые вопросы

Tailwind без npm — можно?
Да. Все примеры выше работают через <script src="https://cdn.tailwindcss.com">. Установка через npm нужна для больших проектов и продакшена.

Почему классы не применяются?
Проверьте: (1) подключён CDN, (2) классы в class="..", а не в <style>, (3) нет опечатки (flex vs felx).

Чем Tailwind отличается от Bootstrap?
Bootstrap даёт готовые компоненты (.btn, .card). Tailwind даёт «кирпичики» (px-4, rounded-lg) — вы собираете вид сами. Больше гибкости, длиннее class.

С чего начать на уроке информатики?
Скопируйте каркас → карточку по центру → поменяйте цвета и текст → добавьте форму входа.

Что дальше

Задача	Куда идти
Макеты на чистом CSS	HTML + CSS — готовые макеты
Анимации `@keyframes`	CSS-анимации — готовые эффекты
Flexbox и Grid в теории	Flexbox и CSS Grid
Модалки, табы, карусель + JS	UI-компоненты, Виджеты на JavaScript
Tailwind в React / Next.js	Экосистема React
Официальная документация	tailwindcss.com/docs

Tailwind — готовые блоки

Основы Tailwind

Что здесь есть — быстрый поиск

Базовые термины

Порядок действий

Длинная строка utility-классов

Шкала отступов (spacing)

Breakpoint — когда включается sm:, md:, lg:

Цвета — число после названия

Обязательный каркас

Стартовые блоки

Карточка по центру экрана

Кнопки — основные варианты

Бейджи и метки статуса

Алерт — уведомление

Аватар и строка профиля

Макеты страницы

Шапка, контент и подвал (sticky footer)

Адаптивная сетка карточек

Навигация с липкой шапкой

Формы

Вход по центру

Контактная форма в две колонки

Секции лендинга

Hero — первый экран

Три преимущества (feature grid)

Тарифы (pricing)

Статистика в одну строку

Отзыв (testimonial)

Интерактив и тёмная тема

Карточка с hover-эффектом

Тёмная тема через класс dark

Шаблоны для экспериментов

Универсальная карточка

Контейнер страницы

Сборка классов через @apply (CDN)

Bento-сетка (разные размеры ячеек)

Частые вопросы

Что дальше

Breakpoint — когда включается `sm:`, `md:`, `lg:`

Тёмная тема через класс `dark`

Сборка классов через `@apply` (CDN)