Using Media Queries and Tailwind Breakpoints in Lovable Layouts

Why traditional CSS media queries behave differently in Lovable projects

Lovable generates projects with Tailwind CSS, which has its own responsive design system built on utility class prefixes. Instead of writing @media (min-width: 768px) in a CSS file, you write md: before any Tailwind class directly in your JSX. This approach is more convenient for AI-generated code because the responsive behavior lives right next to the element it affects. Traditional CSS media queries still work in Lovable projects — Tailwind does not prevent you from using them. But mixing both approaches creates confusion. If a Tailwind class says md:flex and a CSS media query also targets the same breakpoint with different styles, the result depends on CSS specificity, which is hard to debug. There are cases where custom CSS media queries are the right choice: print styles (@media print), dark mode detection (@media (prefers-color-scheme: dark)), reduced motion preferences (@media (prefers-reduced-motion: reduce)), and other feature queries. For screen-size responsiveness, Tailwind breakpoints are almost always the better option in Lovable projects.

• Using traditional @media queries when Tailwind breakpoint prefixes would be more appropriate
• Mixing Tailwind responsive classes with custom CSS media queries on the same element
• Not understanding Tailwind's mobile-first approach — unprefixed classes apply to ALL screens
• CSS media queries in external stylesheets being overridden by Tailwind's utility classes
• Missing responsive behavior because breakpoint prefixes were not added to key layout classes

Error messages you might see

Before you start

• A Lovable project with a layout that needs to adapt to different screen sizes
• Basic understanding of Tailwind CSS classes (flex, grid, hidden, block, etc.)
• The Lovable preview panel open for testing responsive behavior

How to fix it

/* styles.css */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .dashboard-grid {
    grid-template-columns: 250px 1fr;
  }
}
@media (min-width: 1024px) {
  .dashboard-grid {
    grid-template-columns: 300px 1fr 250px;
  }
}

// JSX with Tailwind breakpoints — no external CSS needed
<div className="grid grid-cols-1 md:grid-cols-[250px_1fr] lg:grid-cols-[300px_1fr_250px]">
  <aside className="hidden md:block">Sidebar</aside>
  <main>Content</main>
  <aside className="hidden lg:block">Right Panel</aside>
</div>

// No print styles — page prints with navigation, buttons, etc.

/* src/index.css — add after Tailwind directives */
@media print {
  /* Hide navigation and interactive elements when printing */
  nav, .sidebar, button, .no-print {
    display: none !important;
  }
  /* Remove backgrounds and shadows for cleaner printing */
  * {
    background: white !important;
    box-shadow: none !important;
  }
  /* Ensure content fills the page width */
  main {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

<div className="bg-white text-gray-900">
  <h1 className="text-2xl font-bold">Dashboard</h1>
  <p className="text-gray-600">Welcome back</p>
</div>

<div className="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
  <h1 className="text-2xl font-bold">Dashboard</h1>
  <p className="text-gray-600 dark:text-gray-300">Welcome back</p>
</div>
// In tailwind.config.ts, ensure:
// darkMode: "class" (for manual toggle) or "media" (for OS preference)

<div className="animate-bounce">
  <span>New!</span>
</div>
<button className="transition-all duration-300 hover:scale-105">
  Click me
</button>

<div className="animate-bounce motion-reduce:animate-none">
  <span>New!</span>
</div>
<button className="transition-all duration-300 hover:scale-105 motion-reduce:transition-none motion-reduce:hover:scale-100">
  Click me
</button>

Complete code example

1import { useState } from "react";
2import { Button } from "@/components/ui/button";
3import { Menu, X } from "lucide-react";
4
5const ResponsiveLayout = ({ children }: { children: React.ReactNode }) => {
6  const [sidebarOpen, setSidebarOpen] = useState(false);
7
8  return (
9    <div className="min-h-screen bg-background dark:bg-gray-950">
10      {/* Mobile header with menu toggle — hidden on desktop */}
11      <header className="md:hidden flex items-center justify-between p-4 border-b">
12        <h1 className="text-lg font-semibold">My App</h1>
13        <Button
14          variant="ghost"
15          size="icon"
16          onClick={() => setSidebarOpen(!sidebarOpen)}
17        >
18          {sidebarOpen ? <X /> : <Menu />}
19        </Button>
20      </header>
21
22      <div className="flex">
23        {/* Sidebar: full-screen overlay on mobile, fixed column on desktop */}
24        <aside
25          className={`
26            fixed inset-0 z-40 bg-background p-6 transition-transform duration-200
27            motion-reduce:transition-none
28            md:static md:z-auto md:w-64 md:border-r md:translate-x-0
29            ${sidebarOpen ? "translate-x-0" : "-translate-x-full"}
30          `}
31        >
32          <nav className="space-y-2">
33            <a href="/" className="block p-2 rounded hover:bg-muted">Home</a>
34            <a href="/dashboard" className="block p-2 rounded hover:bg-muted">Dashboard</a>
35            <a href="/settings" className="block p-2 rounded hover:bg-muted">Settings</a>
36          </nav>
37        </aside>
38
39        {/* Main content area — responsive padding */}
40        <main className="flex-1 p-4 md:p-6 lg:p-8">
41          {children}
42        </main>
43      </div>
44    </div>
45  );
46};
47
48export default ResponsiveLayout;

Best practices to prevent this

• Use Tailwind breakpoint prefixes (sm:, md:, lg:) for all screen-size responsive behavior instead of custom media queries
• Remember Tailwind is mobile-first: unprefixed classes apply to all screens, breakpoint prefixes activate at that width and above
• Use custom CSS @media queries only for print styles, prefers-color-scheme, prefers-reduced-motion, and other feature queries
• Never mix Tailwind responsive classes and CSS media queries targeting the same property on the same element
• Test responsive layouts by resizing the Lovable preview panel or using your browser's device emulation mode
• Use the hidden and block classes with breakpoint prefixes to show/hide elements at specific screen sizes
• Enable dark mode in tailwind.config.ts (darkMode: 'class' or 'media') before using the dark: prefix
• Always add motion-reduce: variants to animated elements for accessibility compliance

Still stuck?

Copy one of these prompts to get a personalized, step-by-step explanation.

Related error patterns