CSS framework or responsive utility is configured

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.

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.

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

• 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:

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

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

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