Safelist regex patterns fail to generate utilities for arbitrary variant classes in Tailwind CSS JIT

Answer to the main question

In Tailwind CSS 3.x the safelist regex engine matches the entire class string as it appears in the source. This includes any variant prefixes (e.g., hover:) and the full arbitrary value syntax (e.g., [color:var(--primary)]). The engine does not strip variants before applying the regex.

What this means for arbitrary‑variant classes

• To safelist hover:[color:var(--primary)], your pattern must include the hover: prefix or use a wildcard that covers all variants.
• Common working patterns:
  • /^(hover|focus):\[[^\]]+\]$/ – matches hover: or focus: with any arbitrary value.
  • /^\w+:[^\]]+\]$/ – matches any single‑word variant followed by an arbitrary value.
  • /\[[^\]]+\]/ – matches any class that contains an arbitrary value, regardless of variant.
• Because the regex sees the full class, characters inside the arbitrary value (commas, semicolons, colons) must be escaped if they are part of the pattern.

Confirmed facts

1. Safelist regexes apply to the full class name, including arbitrary variant prefixes.
2. There is no documented boundary that strips variants for regex matching; the documentation explicitly states that the pattern is evaluated against the entire class string.
3. Across Tailwind 3.x (3.0–3.5) the behavior has been stable; no minor release has altered the parsing of arbitrary variants in the safelist.

Practical verification steps

1. Create a minimal tailwind.config.js:

   module.exports = {
     content: ['./src/**/*.{html,js}'],
     safelist: [
       { pattern: /^(hover|focus):\[[^\]]+\]$/ }
     ]
   }
   

2. Add a component using an arbitrary variant, e.g.:

   <div class="hover:[color:var(--primary)]">…</div>
   

3. Run the build with verbose output to see which classes Tailwind has processed:

   npx tailwindcss -i src/input.css -o dist/output.css --verbose
   

4. Check that hover:[color:var(--primary)] appears in the verbose list and that the corresponding CSS rule is present in output.css.

If a class is still missing

• Verify that the regex pattern actually matches the class string. Use a simple tool like RegExp.test in Node to confirm.
• Remember that arbitrary values may contain characters that need escaping (e.g., : inside the value). Adjust the pattern accordingly.
• Check that the class is not being removed by purge settings or other safelist exclusions.

Question for you

To give more targeted help, could you share the exact regex pattern you’re using in the safelist and the Tailwind CSS version you have installed? That will help confirm whether the pattern needs to be tweaked for variant prefixes or arbitrary value syntax.