# How Responsive Breakpoints Are Extracted and Applied for Desktop, Tablet, and Mobile Views

> Learn how responsive breakpoints are extracted and applied for desktop tablet and mobile views using Tailwind CSS prefixes and Nextjs components. Improve your web design workflow.

- Repository: [JCodesMore/ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template)
- Tags: how-to-guide
- Published: 2026-06-23

---

**The JCodesMore/ai-website-cloner-template extracts responsive breakpoints by manually inspecting layouts at 1440px, 768px, and 390px viewport widths, then applies them using Tailwind CSS responsive prefixes (`lg:`, `md:`, `sm:`) and the `cn()` utility function in generated Next.js components.**

The JCodesMore/ai-website-cloner-template defines a systematic workflow for capturing and implementing **responsive breakpoints** when cloning websites. Rather than relying on hard-coded values, the template establishes a manual inspection process that documents layout changes at specific viewport widths and translates them into Tailwind CSS utility classes. This approach ensures that cloned sites faithfully reproduce the original responsive behavior across desktop, tablet, and mobile devices.

## Extracting Responsive Breakpoints from Source Websites

The extraction phase relies on browser DevTools to identify where layout shifts occur. According to [`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md) (lines 457-463), engineers examine the site at three reference widths to capture breakpoint triggers.

### Manual Inspection at Reference Widths

During the inspection phase, engineers open Chrome DevTools in Responsive mode and test the layout at specific viewport widths:

- **1440px** for Desktop views
- **768px** for Tablet views  
- **390px** for Mobile views

These dimensions represent the standard breakpoints where significant layout changes typically occur, such as columns stacking into single rows or navigation menus collapsing into hamburger icons.

### Capturing CSS Values with getComputedStyle

When the layout structure changes at a specific width, engineers extract the exact CSS values using `getComputedStyle()`. As documented in [`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md) (lines 62-68), this method captures computed properties like `display`, `flexDirection`, and `gridTemplateColumns` at the exact breakpoint threshold.

```javascript
// Run in the browser console at a given viewport width
const el = document.querySelector(".header");
const styles = getComputedStyle(el);
console.log({
  width: styles.width,
  display: styles.display,
  flexDirection: styles.flexDirection,
});

```

### Recording Design Tokens

The captured breakpoint data is recorded as **design tokens** in the inspection documentation. The [`docs/research/INSPECTION_GUIDE.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/docs/research/INSPECTION_GUIDE.md) (lines 24-26) specifies that each breakpoint must be listed under a **"Breakpoints"** bullet point, detailing the viewport width and the specific CSS property differences that trigger layout changes.

## Applying Responsive Breakpoints in Next.js Components

Once extracted, breakpoint specifications are embedded into the Next.js codebase using Tailwind CSS's responsive prefix system.

### Tailwind CSS Responsive Prefixes

The builder agent maps the three reference widths to standard Tailwind prefixes:

- `lg:` corresponds to **≥1440px** (Desktop)
- `md:` corresponds to **≥768px** (Tablet)  
- `sm:` corresponds to **≤390px** (Mobile)

These prefixes conditionally apply utility classes based on viewport width, eliminating the need for custom media queries in most cases.

### The cn() Utility Function

The [`src/lib/utils.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/lib/utils.ts) file exports a `cn()` function that serves as a thin wrapper around `twMerge` and `clsx`. This utility composes class strings containing responsive prefixes, ensuring proper class ordering and conflict resolution.

```tsx
import { cn } from "@/lib/utils";

export const Card = () => (
  <section
    className={cn(
      "p-4 rounded-lg shadow-lg",          // base styles
      "lg:p-8",                            // larger padding on desktop (≥1440px)
      "md:p-6",                            // medium padding on tablet (≥768px)
      "sm:p-4"                             // small padding on mobile (≤390px)
    )}
  >
    {/* card content */}
  </section>
);

```

For grid layouts, the responsive prefixes control column counts across viewports:

```tsx
<div className={cn(
  "grid gap-4",                     // base layout
  "lg:grid-cols-4",                 // ≥1440px: four columns
  "md:grid-cols-2",                 // ≥768px: two columns
  "sm:grid-cols-1"                  // ≤390px: single column
)}>
  {/* …components… */}
</div>

```

## Verification Workflow

After code generation, developers verify responsive behavior by testing the application at the three reference widths (1440px, 768px, and 390px). The [`README.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/README.md) indicates that breakpoint specifications are part of the component spec passed to builder agents. If discrepancies exist between the cloned and original sites, engineers adjust the breakpoint specifications and regenerate the components until the layouts match.

## Summary

- The template uses **manual inspection** at 1440px, 768px, and 390px rather than hard-coded breakpoints.
- CSS values are extracted using **`getComputedStyle()`** and recorded as design tokens in [`docs/research/INSPECTION_GUIDE.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/docs/research/INSPECTION_GUIDE.md).
- The **`cn()`** utility in [`src/lib/utils.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/lib/utils.ts) composes Tailwind responsive classes (`lg:`, `md:`, `sm:`) for Next.js components.
- Each breakpoint documents specific layout changes, such as grid column shifts or padding adjustments.
- The workflow requires verification at all three viewport widths to ensure fidelity to the original design.

## Frequently Asked Questions

### What specific viewport widths does the template use for breakpoint extraction?

The template specifies three reference widths documented in [`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md): **1440px** for Desktop, **768px** for Tablet, and **390px** for Mobile. These widths represent the standard breakpoints where layouts typically transition between devices.

### How does the template capture CSS properties at specific breakpoints?

Engineers use the browser's native **`getComputedStyle()`** method to extract computed CSS values at the exact viewport width where layout changes occur. This captures properties like `display`, `flexDirection`, and `margin-bottom` as documented in the workflow file (lines 62-68).

### Why doesn't the template use hard-coded breakpoint values?

The template defines a **process** rather than fixed values because cloned websites may use custom breakpoints that differ from standard frameworks. By inspecting the original site manually, engineers capture the actual pixel widths where the original designer implemented responsive changes, ensuring accurate replication regardless of the source site's breakpoint conventions.

### What is the purpose of the `cn()` utility function?

The **`cn()`** function exported from [`src/lib/utils.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/lib/utils.ts) combines `twMerge` and `clsx` to safely compose Tailwind CSS class strings. It handles responsive prefixes like `lg:` and `md:` while resolving class conflicts, ensuring that padding, grid columns, and other responsive utilities apply correctly across viewport sizes.