JIT + dark + arbitrary value is not working

[phuctm97]

What version of Tailwind CSS are you using?

v2.2.2

What build tool (or framework if it abstracts the build tool) are you using?

Webpack

What version of Node.js are you using?

v14.17.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction repository

https://play.tailwindcss.com/bQUf4HyGrG

Describe your issue

When using darkMode: 'class', dark:text-[rgb(217,217,217)] won't work. If I define the color in theme then use the color name, then it works.

Reproduce:
Search for line with dark:dop-text-[rgb(217,217,217)] you will see there is no effect.
https://play.tailwindcss.com/bQUf4HyGrG

Not sure why it is not working either. The editor suggested correctly but there is no class generated.

[peteretelej]

interestingly, works if you specify the hex, or name, but not rgb/a

[FallDownTheSystem]

It seems to work if you drop the dop- prefix, so I guess some kind of issue with prefixes and JIT.

[phuctm97]

Seem like the issue is because of these patterns are missing rgb(...):

tailwindcss/src/jit/lib/expandTailwindAtRules.js

Lines 9 to 16 in a230653

	const PATTERNS = [
	"([^<>\"'`\\s]*\\['[^<>\"'`\\s]*'\\])", // `content-['hello']` but not `content-['hello']']`
	'([^<>"\'`\\s]*\\["[^<>"\'`\\s]*"\\])', // `content-["hello"]` but not `content-["hello"]"]`
	'([^<>"\'`\\s]*\\[[^<>"\'`\\s]+\\])', // `fill-[#bada55]`
	'([^<>"\'`\\s]*[^<>"\'`\\s:])', // `px-1.5`, `uppercase` but not `uppercase:`
	].join('|')
	const BROAD_MATCH_GLOBAL_REGEXP = new RegExp(PATTERNS, 'g')
	const INNER_MATCH_GLOBAL_REGEXP = /[^<>"'`\s.(){}[\]#=%]*[^<>"'`\s.(){}[\]#=%:]/g

[Noitidart]

Hi there,

This is not working for ring opacity on text inputs. There is a Stackoverflow topic here - https://stackoverflow.com/a/71168939/1828637

A Tailwind Play shows this is still an issue - https://play.tailwindcss.com/Tv8lkLkkLn