Tailwind JIT scanner and runtime-generated class names: where should the safelist boundary sit?

Answer

Use the safelist option with an anchored regex pattern that matches the exact variant‑based utilities you expect at runtime. An explicit map of class strings in source works but duplicates the safelist purpose and adds maintenance overhead.

Confirmed facts

• Tailwind’s JIT content scanner only detects literal class strings in scanned files; any class assembled via interpolation or variable concatenation is invisible to the scanner.
• Classes added via safelist are exempt from content‑based purge, guaranteeing they appear in the final CSS regardless of whether they are scanned.
• A regex safelist entry does not inherently increase bundle size; the generated CSS contains only the utilities that actually match the pattern. The size delta versus enumerating each exact class is negligible unless the pattern is overly broad.
• Safelist can match any utility that conforms to the pattern, but it cannot generate arbitrary‑value utilities (e.g., [#123456] or p-[13px]) unless the arbitrary value itself matches the regex; such values must be listed explicitly or the pattern must be crafted to capture them.

Steps for this case

1. Obtain the current list of variant strings from the CMS (e.g., ["blue", "red", "green"]).
2. Build anchored regex safelist entries for each utility pattern, for example:

   safelist: [
     { pattern: /^text-(blue|red|green)-500$/ },
     { pattern: /^bg-(blue|red|green)-100$/ }
   ]
   

   Add this array to tailwind.config.js under the safelist key.
3. Run a production build:

   tailwindcss -i ./src/input.css -o ./dist/output.css --minify
   

4. Verify the output contains the expected classes:

   grep -E 'text-(blue|red|green)-500|bg-(blue|red|green)-100' ./dist/output.css
   

5. Optionally compare bundle size with a build where the same classes are enumerated explicitly in a scanned source file (e.g., a constants map). The sizes should differ by only a few bytes if the regex matches the same set.

Missing diagnostic detail

If the CMS‑driven variant set changes frequently or is not known ahead of time, you need a process to regenerate the safelist regex whenever the variant list updates. Without that detail, the recommendation to use an anchored regex safelist remains valid, but you must confirm how and when the variant list will be supplied to the build step.