Мы уже познакомились с утилитами, цветами и шрифтами. Теперь соберём всё вместе и создадим маленький лендинг с тремя ключевыми блоками: шапкой (Header), главным блоком (Hero) и подвалом (Footer). Такой каркас — основа для любого сайта.

Навигация по статье

Шаг 1. Структура страницы

Создадим три секции:

Header — простая навигация,
Hero — главный блок с заголовком и кнопкой,
Footer — подвал с текстом.

HTML-шаблон:

<body class="font-sans bg-gray-50 text-gray-800">
  <!-- Header -->
  <header class="bg-white shadow">
    <div class="max-w-5xl mx-auto px-4 py-4 flex justify-between items-center">
      <h1 class="text-xl font-bold text-brand">MySite</h1>
      <nav class="space-x-4">
        <a href="#" class="text-gray-600 hover:text-brand">Главная</a>
        <a href="#" class="text-gray-600 hover:text-brand">О нас</a>
        <a href="#" class="text-gray-600 hover:text-brand">Контакты</a>
      </nav>
    </div>
  </header>

  <!-- Hero -->
  <section class="bg-brand text-white py-20 text-center">
    <h2 class="text-4xl font-bold mb-4">Создаём сайты быстро</h2>
    <p class="text-lg mb-6">Tailwind CSS помогает верстать быстрее и проще</p>
    <button class="bg-white text-brand px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">
      Начать
    </button>
  </section>

  <!-- Footer -->
  <footer class="bg-gray-100 text-center py-6 mt-10">
    <p class="text-gray-500">© 2025 MySite. Все права защищены.</p>
  </footer>
</body>

Шаг 2. Разбираем блоки

Header

flex justify-between — логотип слева, навигация справа.
space-x-4 — отступы между ссылками.
hover:text-brand — при наведении ссылка подсвечивается фирменным цветом.
shadow — создаёт лёгкую тень у шапки.

Hero

bg-brand text-white — фон фирменного цвета и белый текст.
py-20 — большие вертикальные отступы для «воздуха».
text-center — выравнивание по центру.
Кнопка контрастная: белый фон + фирменный цвет текста.
transition — добавляет плавность при наведении.

Footer

bg-gray-100 — светлый фон.
text-gray-500 — приглушённый текст.
mt-10 — отступ сверху, чтобы отделить футер от контента.

Шаг 3. Адаптивность

Tailwind позволяет легко управлять размерами и поведением элементов на разных экранах. Попробуем сделать заголовок в Hero более гибким:

<h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4">
  Создаём сайты быстро
</h2>

Теперь на маленьких экранах текст будет меньше, а на больших — крупнее. Такой подход mobile-first делает верстку адаптивной без лишнего CSS.

Другие полезные моменты для адаптивности

Можно скрывать или показывать элементы: hidden sm:block — скрыть на мобильных, показать на десктопе.
Навигация часто превращается в бургер-меню: md:hidden — скрыть меню на больших экранах и показать другое.

Шаг 4. Небольшое задание

📢 Подписывайтесь на наш Telegram-канал.

Там вы найдете анонсы обучающих статей и видео, готовый код для ваших проектов и увлекательные курсы. Ничего лишнего — только практика, вдохновение и развитие.

👉 https://t.me/codelab_channel

Добавь ещё одну секцию между Hero и Footer — например, с тремя карточками услуг.

<section class="max-w-5xl mx-auto px-4 py-16 grid grid-cols-1 sm:grid-cols-3 gap-6">
  <div class="p-6 bg-white rounded-lg shadow text-center">
    <h3 class="text-xl font-semibold mb-2">Дизайн</h3>
    <p class="text-gray-600">Современные интерфейсы для вашего бизнеса</p>
  </div>
  <div class="p-6 bg-white rounded-lg shadow text-center">
    <h3 class="text-xl font-semibold mb-2">Разработка</h3>
    <p class="text-gray-600">Быстрая и качественная веб-разработка</p>
  </div>
  <div class="p-6 bg-white rounded-lg shadow text-center">
    <h3 class="text-xl font-semibold mb-2">Поддержка</h3>
    <p class="text-gray-600">Сопровождение и развитие проектов</p>
  </div>
</section>

Классы grid grid-cols-1 sm:grid-cols-3 gap-6 создают сетку: одну колонку на мобильных и три на десктопе. Отступы и тени добавляют «воздуха» и акцентируют карточки.

Шаг 5. Дополнительные нюансы

Для больших проектов стоит использовать @apply в CSS, чтобы группировать повторяющиеся классы (например, для кнопок).
Цвета и шрифты лучше вынести в токены через @theme, чтобы весь проект был единообразным.
Tailwind поддерживает состояния: hover:, focus:, active:, disabled:. Это удобно для улучшения UX.
Используйте max-w-* для ограничения ширины и центрирования контента.

Итог

Мы собрали первый рабочий макет на Tailwind:

настроили навигацию,
сделали яркий hero-блок,
добавили футер,
расширили страницу секцией с услугами.

Теперь у тебя есть основа, на которой можно строить полноценный сайт.

👉 На этом заканчивается Модуль 1. Дальше мы перейдём к макетам и адаптивности с помощью Flex и Grid, а также к Container query, которые появились в Tailwind v4.