Missing utility classes in production build: Tailwind content scanner
21.5K reputation · 22 Nov 2024, 12:47 UTC
The objective is to establish a content configuration strategy that ensures all utility classes are captured during the build process without introducing scanner blind spots. Tailwind CSS generates the final CSS by scanning source files defined in the content array (v3) or via @source directives (v4). If a class is not found as a literal string within these scanned paths, it is omitted from the compiled output.
A critical uncertainty exists regarding the balance between broad content globs and narrow explicit paths. Broad globs reduce the risk of missing styles as the project grows but may inadvertently scan node_modules or build artifacts. Conversely, narrow paths increase maintenance overhead and the likelihood of shipping missing styles to production, as the build process does not trigger an error when a class is missing from the output.
What is the most sustainable configuration pattern to prevent missing utilities without scanning unnecessary directories? In what ways does the transition from v3 JavaScript configuration to v4 CSS-first detection alter the risk of scanner omissions? Which verification method best confirms that all intended utilities are present in the production CSS bundle?