The syntax you want to use was only introduced in v4.1, so earlier versions don't include it.

• How is it possible to specify a safelist in TailwindCSS v4? Is it possible to list patterns and variants instead of full class names?

From TailwindCSS v4.1.0 onwards

With this feature, now have the ability to include critically important classes in the compiled CSS using a syntax similar to the safelist property from v3.

• tailwindlabs/tailwindcss PR #17147:
  _Add @source inline(…)
  _and @source not inline(…) - GitHub
• Safelisting specific utilities by @source inline() - TailwindCSS v4 Docs
• Extra description from #15291: Safelist in TailwindCSS v4 - GitHub

# Force update to TailwindCSS v4.1 with CLI plugin
npm install tailwindcss@^4.1 @tailwindcss/cli@^4.1

# Force update to TailwindCSS v4.1 with PostCSS plugin
npm install tailwindcss@^4.1 @tailwindcss/postcss@^4.1

# Force update to TailwindCSS v4.1 with Vite plugin
npm install tailwindcss@^4.1 @tailwindcss/vite@^4.1

Reproduction in Play CDN:

<!-- At least v4.1 is required! -->
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/[email protected]"></script>
<style type="text/tailwindcss">
@source inline("{hover:,}bg-red-{50,{100..900..100},950}");
</style>

<div class="text-3xl bg-red-100 hover:bg-red-900">
  Hello World
</div>