Tailwind CSS Missing Classes: Audit the Production Source Scan

When a Tailwind style disappears in production, trace the exact class from the rendered element back to its source and generated stylesheet. Start with one missing state. Generating every possible colour or spacing utility may hide the symptom while making the build larger and the actual dependency harder to understand.

The Tailwind CSS collection includes products such as Orbit, whose catalogue describes a SaaS starter. A starter's styling setup is worth inspecting before adding your own packages and content directories. The procedure here is general diagnostic guidance, not a report of a defect in Orbit.

Capture the missing state precisely

Record the route, viewport, theme and interaction that reveal the problem. Inspect the element's final class attribute and the computed property that differs from the expected result. A missing class rule and a rule overridden by another declaration need different fixes.

Compare development and production builds from the same source revision. Keep the content and configuration comparable. If different records are rendered, the problem may be a state you never exercised in development rather than a build transformation.

Find a complete class token

Tailwind's source detection guide explains that source files are scanned as text. Building a utility name from separate string fragments does not necessarily leave the complete token available to that scan.

For a bounded set of component variants, map each variant to complete class strings that the build can discover. Give the variant a meaningful application name rather than allowing arbitrary unreviewed styling input to flow through the component.

Check the default and error states too. A success screenshot can conceal a missing warning colour, disabled control or expanded panel style that only appears under a specific condition.

Verify which files are included

Follow the installed Tailwind version's configuration and confirm the actual base path used by the build command. Monorepo packages, shared components and external UI libraries may live outside an assumed application folder.

Register the sources the runtime genuinely needs. Exclude unrelated generated reports or archived examples only after checking that they do not supply live markup. A broad directory exclusion can save bytes while accidentally removing a rarely visited administrative state.

Keep this change separate from a visual redesign. The desired result is the same intended interface with a more accurate build input boundary.

Inspect the emitted stylesheet

Create a fresh production build and search the output for the missing utility or its escaped selector. Then serve that build and repeat the original interaction. Presence in a file alone does not establish that the browser requested that stylesheet or applied the declaration.

Record decoded and transferred stylesheet size if payload reduction is part of the task. Do not translate a smaller CSS file directly into a claimed Lighthouse score gain without equivalent measurements.

Protect shared states before release

Exercise representative public and authenticated routes, mobile navigation, form errors and both supported themes. Review third-party components that receive application classes. A source scan is shared infrastructure even when the first symptom appeared on one page.

If a finite set of utilities genuinely comes from data, document that boundary and use the framework's supported explicit inclusion mechanism. Avoid an unlimited list assembled from guesses.

The companion Tailwind theme migration guide addresses changes to the meaning of existing design tokens. Source scanning answers whether a rule exists; theme review answers whether that rule still expresses the design you intended.