Debug missing or overridden utilities

When a style does not appear, debug systematically:

  1. Confirm the utility name and syntax are valid for the installed version.
  2. Inspect the element's class attribute in the browser.
  3. Check whether the class candidate appears in a scanned source file.
  4. Inspect the generated CSS and computed styles.
  5. Look for specificity, cascade layers, inline styles, or conflicting rules.
  6. Check whether a parent clips or constrains the element.

A class being present in HTML does not guarantee a matching rule exists. Likewise, a generated rule may be overridden by another declaration. Distinguish generation problems from cascade problems before applying a workaround.

Use DevTools first

Inspect the computed style and matched CSS rules before changing class order or adding !important. The browser can show whether the problem is generation, cascade, or layout.

Missing utility debugging flow