Адаптивная вёрстка
daisyUI не вводит своих правил адаптивности: работают обычные префиксы Tailwind sm:, md:, lg:. Их можно ставить и перед утилитами, и перед классами daisyUI — например, lg:drawer-open или md:stats-horizontal. Соберём лендинг LearnUp, который нормально выглядит и на телефоне, и на компьютере.
Префиксы перед компонентами
Префикс означает «с этой ширины экрана и шире». Классы daisyUI с префиксом ведут себя так же, как утилиты:
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<button class="btn btn-sm md:btn-lg">Записаться</button>Сузьте окно браузера: на узком экране кнопка маленькая, от 768 пикселей — большая.
Шапка с меню-гамбургером
На компьютере ссылки стоят в ряд, а на телефоне прячутся в выпадающее меню. Для этого в шапке два меню: одно видно только на узком экране (lg:hidden), другое — только на широком (hidden lg:flex):
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="min-h-56">
<div class="navbar bg-base-100 shadow-sm">
<div class="navbar-start">
<details class="dropdown lg:hidden">
<summary class="btn btn-ghost">☰</summary>
<ul class="menu dropdown-content w-48 rounded-box bg-base-100 shadow-sm">
<li><a href="#courses">Курсы</a></li>
<li><a href="#prices">Цены</a></li>
<li><a href="#faq">Вопросы</a></li>
</ul>
</details>
<a href="#" class="btn btn-ghost text-xl">LearnUp</a>
</div>
<div class="navbar-center hidden lg:flex">
<ul class="menu menu-horizontal">
<li><a href="#courses">Курсы</a></li>
<li><a href="#prices">Цены</a></li>
<li><a href="#faq">Вопросы</a></li>
</ul>
</div>
<div class="navbar-end">
<a href="#login" class="btn btn-primary">Войти</a>
</div>
</div>
</div>Окно примера уже 1024 пикселей, поэтому слева видна кнопка «☰», открывающая меню. На широком экране она исчезнет, а ссылки встанут в ряд по центру шапки.
Первый экран и карточки
Hero — крупный первый блок лендинга с заголовком и кнопкой. Его части hero и hero-content центрируют содержимое; утилиты flex-col lg:flex-row ставят картинку под текстом на телефоне и рядом — на компьютере:
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="hero bg-base-200 py-8">
<div class="hero-content flex-col lg:flex-row">
<img src="/media/photo-400x250.jpg" alt="Ученики за ноутбуками" class="max-w-xs rounded-box">
<div>
<h1 class="text-3xl font-bold md:text-5xl">Учитесь программировать</h1>
<p class="py-4">Короткие уроки, задачи и проверка в браузере.</p>
<button class="btn btn-primary">Выбрать курс</button>
</div>
</div>
</div>
<div class="grid gap-4 p-4 sm:grid-cols-2 lg:grid-cols-3">
<div class="card bg-base-100 shadow-sm"><div class="card-body">Основы HTML — $19</div></div>
<div class="card bg-base-100 shadow-sm"><div class="card-body">JavaScript с нуля — $29</div></div>
<div class="card bg-base-100 shadow-sm"><div class="card-body">Вёрстка на Flexbox — $19</div></div>
</div>Серый первый экран с картинкой и призывом, а под ним карточки: одна колонка на телефоне, две — от 640 пикселей, три — от 1024.
Частая ошибка
Ждать от компонента собственной адаптивности. menu-horizontal не превращается в гамбургер сам, stats не переносит блоки, а card-side на телефоне остаётся горизонтальной и сжимает текст. Решайте это префиксами: lg:card-side, stats-vertical md:stats-horizontal, отдельное меню для узкого экрана — и всегда проверяйте страницу при ширине около 375 пикселей.