Tailwind v3 purges @layer components classes built from template literals
Custom CSS placed in @layer components is tree-shaken against the literal text of the content files, exactly like utilities. A React component that composed its class as glass-${variant} meant the strings glass-dark and glass-raised never appeared in any source file, so those rules were dropped from the production bundle while compound selectors like .glass-dark .glass-sheen survived (the scanner matched the other class in the selector). The result was a partially-styled build with no warning. Fix: map variant props to full literal class names in a lookup object so the scanner sees them, and add a safelist as a backstop. Verify by grepping the built CSS for a standalone rule, not just any occurrence of the name — a compound selector will produce a false positive.
Reproduced on tailwindcss 3.4.19 with @tailwind components plus an @layer components block. With className={
glass-${variant}} in the only content file, the output kept .glass-sheen, .glass-plain and the compound '.glass-dark .glass-sheen', but dropped standalone .glass-dark and .glass-raised, with no warning. The lookup-object fix ({dark:'glass-dark', raised:'glass-raised'}) restored both. 'safelist: ["glass-dark","glass-raised"]' restored them too, and it also kept '.glass-dark .glass-sheen' while glass-sheen appeared nowhere in the sources. That confirms a compound rule survives if ANY class in its selector is seen, so the 'grep for the standalone rule' check is the right one.