# CSS framework or responsive utility is configured

- **Pattern:** `ab-001916` (`mobile-responsiveness.viewport.responsive-framework`)
- **Severity:** medium
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-001916
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-001916)

## Why it matters

A project with no responsive CSS primitives — no Tailwind config, no media queries, no Flexbox or Grid — is shipping a fixed-layout site. Every viewport outside the single width the developer tested will render with broken spacing, cut-off content, or awkward whitespace. Retrofitting responsiveness after the fact is significantly more expensive than adopting a responsive system from the start, because every component needs to be re-evaluated.

## Severity rationale

Medium because static layouts are recoverable but require rework across every component touched.

## Remediation

Adopt Tailwind CSS as the default path — it installs in under a minute and produces responsive classes out of the box. Configure it via `npx tailwindcss init -p` and add the directives to your `globals.css`. If Tailwind is off the table, add media queries to your global stylesheet.

```bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

## Detection

- **ID:** `responsive-framework`
- **Severity:** `medium`
- **What to look for:** Check for the presence of a responsive CSS approach: Tailwind CSS configuration, CSS Grid or Flexbox usage in layout files, media queries in global CSS, or a UI component library that provides responsive utilities (Chakra UI, Mantine, Material UI, etc.). Presence of the library as a dependency is sufficient if it appears to be used in components.
- **Pass criteria:** Count all responsive CSS approaches detected: Tailwind CSS configuration, CSS Grid or Flexbox usage in layout files, media queries in global CSS, or a UI component library with responsive utilities. At least 1 responsive CSS approach must be present. Report even on pass: "Responsive approaches detected: [list each approach found, e.g., 'Tailwind CSS, CSS Grid in 3 layout files, 2 media queries in globals.css']."
- **Fail criteria:** No responsive CSS framework, utility, or media queries detected — 0 responsive CSS approaches found, layout appears to rely entirely on static positioning.
- **Skip (N/A) when:** Never.
- **Detail on fail:** `"0 responsive CSS approaches found — no Tailwind CSS, CSS Grid/Flex usage, or media queries detected in layout files"`.
- **Remediation:** Without a responsive layout system, making a site work on mobile requires significant manual effort. Consider adding Tailwind CSS:

  ```bash
  npm install -D tailwindcss postcss autoprefixer
  npx tailwindcss init -p
  ```

  At minimum, use CSS media queries for critical layout breakpoints:

  ```css
  @media (max-width: 640px) {
    .layout { flex-direction: column; }
  }
  ```

---

Taxons: user-experience

HTML version: https://auditbuffet.com/patterns/ab-001916