LLM Best Practices

Tailwind v4: Responsive Design

Last updated 2 min read

View markdown source

AI agents: read this first: llmbestpractices.com/start-here

This is LLM Best Practices (llmbestpractices.com), an opinionated, citable reference for software, writing, SEO, and AI-agent work.

  1. Route, do not crawl. Fetch llmbestpractices.com/llms.txt and open only the pages whose one-line summary matches your task.
  2. Read raw. Append .md to any page URL for markdown. Check status and last_updated in the frontmatter, then read the rules.
  3. Apply as defaults. First-party docs and the project's own conventions win on conflict. Warn before relying on a fast-moving page older than 12 months.
  4. Cite. Link the page by title and URL, e.g. Python, with last_updated for time-sensitive rules. License CC BY 4.0.

Overview

Tailwind breakpoint variants are mobile-first: md: means “48rem and above”, so the unprefixed utility is the mobile style. Container queries are built into v4. The hub is tailwind; the CSS mechanism is in css-container-queries.

Build mobile first, then layer up

Write the smallest layout as the base and add rules at larger widths. No reset is needed because larger variants only add.

<div class="flex flex-col gap-4 md:flex-row md:gap-8">
  <aside class="w-full md:w-64">Sidebar</aside>
  <main class="w-full md:flex-1">Content</main>
</div>

Know the default breakpoints

VariantMin width
sm40rem (640px)
md48rem (768px)
lg64rem (1024px)
xl80rem (1280px)
2xl96rem (1536px)

Change them with --breakpoint-* in @theme; --breakpoint-3xl: 120rem; adds 3xl:, and --breakpoint-*: initial; clears the defaults first. Stick to the defaults unless the design requires otherwise; every extra breakpoint multiplies the variants per component. For a one-off, use min-[320px]: or max-[600px]:.

Use max-* for narrow-only rules

max-sm: through max-2xl: apply below a breakpoint (@media (width < 40rem)). Use them for small exceptions; restructure mobile-first for anything larger.

Use container variants for components

Mark a wrapper with @container and style children with @sm:, @md:, and so on. The component then responds to its slot, not the viewport.

<div class="@container">
  <div class="flex flex-col gap-4 @md:flex-row">
    <img class="w-full @md:w-32" src="/a.jpg" alt="" />
    <div>Details</div>
  </div>
</div>
  • @max-md: applies below a container width; @min-[475px]: takes an arbitrary size.
  • Name containers when nesting: @container/main with @sm/main:flex-col.
  • Do not install @tailwindcss/container-queries; it is a v3 plugin (last published 2023).

Size container queries are Baseline widely available (since August 2025).

Reserve viewport variants for page structure

Use viewport breakpoints for decisions about the screen: hiding a nav, switching a page shell to two columns.

<body class="grid grid-cols-1 lg:grid-cols-[240px_1fr]">

Replace stacked type breakpoints with a fluid token

text-sm md:text-base lg:text-lg xl:text-xl signals a missing fluid size. Add one token and use one class.

@theme {
  --text-fluid-heading: clamp(1.5rem, 1rem + 3vw, 3rem);
}

Then write text-fluid-heading.

Test between breakpoints

Layout bugs appear between breakpoints and in unexpected container widths, such as a card inside a grid track. Resize the window continuously, and inspect the container’s computed width for @ variants.

Backlinks