Responsive layout
daisyUI brings no responsive rules of its own: the usual Tailwind prefixes sm:, md:, lg: do the job. They work both before utilities and before daisyUI classes — for example, lg:drawer-open or md:stats-horizontal. Let us build a LearnUp landing page that looks right on both a phone and a computer.
Prefixes before components
A prefix means "from this screen width and wider". daisyUI classes with a prefix behave just like utilities:
<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">Enroll</button>Narrow the browser window: on a narrow screen the button is small, from 768 pixels it is large.
A navbar with a hamburger menu
On a computer the links stand in a row, on a phone they hide in a dropdown. For that the navbar has two menus: one visible only on narrow screens (lg:hidden), the other only on wide ones (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">Courses</a></li>
<li><a href="#prices">Pricing</a></li>
<li><a href="#faq">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">Courses</a></li>
<li><a href="#prices">Pricing</a></li>
<li><a href="#faq">FAQ</a></li>
</ul>
</div>
<div class="navbar-end">
<a href="#login" class="btn btn-primary">Log in</a>
</div>
</div>
</div>The preview window is narrower than 1024 pixels, so on the left you see a "☰" button that opens the menu. On a wide screen it disappears, and the links line up in the middle of the navbar.
The first screen and cards
A hero is the large first block of a landing page with a heading and a button. Its parts hero and hero-content center the content; the flex-col lg:flex-row utilities put the image under the text on a phone and next to it on a computer:
<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="Students at laptops" class="max-w-xs rounded-box">
<div>
<h1 class="text-3xl font-bold md:text-5xl">Learn to code</h1>
<p class="py-4">Short lessons, tasks and checks right in the browser.</p>
<button class="btn btn-primary">Choose a course</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 basics — $19</div></div>
<div class="card bg-base-100 shadow-sm"><div class="card-body">JavaScript from scratch — $29</div></div>
<div class="card bg-base-100 shadow-sm"><div class="card-body">Flexbox layouts — $19</div></div>
</div>A grey first screen with an image and a call to action, and cards under it: one column on a phone, two from 640 pixels, three from 1024.
Common mistake
Expecting a component to be responsive by itself. menu-horizontal does not turn into a hamburger on its own, stats does not wrap its blocks, and card-side stays horizontal on a phone and squeezes the text. Solve this with prefixes — lg:card-side, stats-vertical md:stats-horizontal, a separate menu for narrow screens — and always check the page at a width of about 375 pixels.