9. Адаптивный дизайн

Tailwind CSS: Адаптивный дизайн

Tailwind использует mobile-first подход: стили без префикса — для мобильных, с префиксом — для больших экранов. Это противоположность Desktop-First (где пишут стили для десктопа и потом переопределяют для мобильных).

Брейкпоинты Tailwind

Префикс	Минимальная ширина	Устройство
(нет)	0px	Мобильный
sm:	640px	Большой телефон
md:	768px	Планшет
lg:	1024px	Ноутбук
xl:	1280px	Десктоп
2xl:	1536px	Большой монитор

Как это работает

<!-- Mobile-first: сначала мобильный, потом переопределяем -->

<!-- Текст: sm на мобильных, xl на планшете, 3xl на десктопе -->
<h1 class="text-sm md:text-xl lg:text-3xl">Заголовок</h1>

<!-- Колонки: 1 на мобильных → 2 на планшете → 4 на десктопе -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">...</div>

<!-- Скрыть/показать -->
<div class="hidden md:block">Только для планшета и больше</div>
<div class="block md:hidden">Только для мобильных</div>

<!-- Padding: маленький на мобильных, большой на десктопе -->
<div class="px-4 md:px-8 lg:px-16">...</div>

Реальные паттерны

Навигация (hamburger → horizontal):

<nav class="px-4 py-3 bg-white border-b">
  <div class="flex items-center justify-between">
    <span class="font-bold">Logo</span>

    <!-- Бургер-кнопка: только на мобильных -->
    <button class="md:hidden">☰</button>

    <!-- Меню: горизонтально на md+, скрыто на мобильных -->
    <div class="hidden md:flex gap-6">
      <a href="#">Главная</a>
      <a href="#">О нас</a>
      <a href="#">Контакты</a>
    </div>
  </div>
</nav>

Hero section:

<section class="flex flex-col md:flex-row items-center gap-8 py-16 px-4 md:px-8">
  <!-- Текст: сначала центрирован (мобильные), потом слева -->
  <div class="text-center md:text-left md:w-1/2">
    <h1 class="text-3xl md:text-5xl font-bold">Заголовок</h1>
    <p class="mt-4 text-gray-600">Описание...</p>
    <button class="mt-6 bg-blue-600 text-white px-8 py-3 rounded-xl">
      Начать
    </button>
  </div>
  <!-- Иллюстрация: на всю ширину мобильных, половина на десктопе -->
  <div class="w-full md:w-1/2">
    <img src="hero.png" class="w-full" alt="Hero">
  </div>
</section>

Sidebar layout:

<!-- Стек на мобильных, два столбца на десктопе -->
<div class="flex flex-col lg:flex-row gap-8">
  <!-- Основной контент: полная ширина → 2/3 -->
  <main class="w-full lg:w-2/3">...</main>
  <!-- Сайдбар: полная ширина → 1/3 -->
  <aside class="w-full lg:w-1/3">...</aside>
</div>

Container

<!-- Контейнер по умолчанию: max-width на каждом брейкпоинте -->
<div class="container mx-auto px-4">
  <!-- sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px -->
</div>

Кастомные брейкпоинты

tailwind.config.js

module.exports = {
  theme: {
    screens: {
      'xs': '475px',    // Добавляем xs
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
      '3xl': '1920px',  // Добавляем 3xl
    },
  },
}

Практика