Skip to main content

CSS framework or responsive utility is configured

ab-001916 · mobile-responsiveness.viewport.responsive-framework
Severity: mediumactive

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.

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

Detection

  • ID: mobile-responsiveness.viewport.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; }
}

Taxons

user-experience

History