Debug missing classes

If a class has no effect, inspect the element.

Use a fixed sequence instead of changing random utilities.

First, confirm the class token in the DOM is exactly what you expect. Template conditionals, merge helpers, and typos can produce a different string.

Second, search the generated stylesheet:

• Rule missing: make sure the complete class appears in a detected source file. Dynamic fragments such as bg-${color}-600 cannot be understood by the text scanner. Check ignored directories, monorepo base paths, and external libraries; add an intentional @source only when needed.
• Rule present: inspect whether its selector and variant condition match. md:* needs the minimum viewport width, @md:* needs a query container, peer-* needs the correct sibling order, and dark:* needs the configured dark condition.

Third, inspect the Styles and Computed panels. A crossed-out declaration lost the cascade. The order of class names in the HTML is not a reliable conflict-resolution tool; remove contradictory utilities or make the condition explicit.

Fourth, verify the property can affect this box. justify-center needs a suitable Flex or Grid container. h-full needs a definite parent height. z-50 cannot escape every stacking context. A generated, winning rule can still appear ineffective because the layout assumption is wrong.

Finally, check browser support, invalid arbitrary syntax, inherited values, CSS variables, and stale build output. Restarting the build can confirm a watcher problem, but it should not be the first or only diagnosis.

Record evidence at each layer: source token, generated selector, matched condition, winning computed value, and layout context.

Your action is to create four controlled failures: dynamic class, inactive variant, conflicting utility, and wrong layout context. Diagnose each without guessing and save the decisive DevTools evidence.