Negative classes not matched by pattern safelisting

[mwnciau]

What version of Tailwind CSS are you using?

v3.0.2

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

postcss-cli 9.1.0

What version of Node.js are you using?

v14.16.1

What browser are you using?

n/a

What operating system are you using?

Windows 10

Reproduction URL

n/a

Describe your issue

Pattern safelisting, introduced in #5511, allows you to use regular expressions to match classes to whitelist. E.g. an overly simple regex to match the "top-1" class:

{
    pattern: /^top-1$/,
}

This will produce a css file with the "top-1" class, as expected. However, I cannot get this to work with negative values.

{
    pattern: /^-top-1$/,
}

This should produce a css file with the "-top-1" class, but this class is not in the resulting css file. It works fine, however, when not using pattern safelisting:

safelist: [
    "-top-1",
    {
        pattern: /-top-2/,
    }
]

The above produces a css file with the "-top-1" class, but not the "-top-2" class.

I wondered if it could be a variant, but the documentation for variants is particularly sparse so I also tried the below with no success.

{
    pattern: /^top-1$/,
    variants: ['-'],
}

{
    pattern: /^top-1$/,
    variants: ['negative'],
}

[mwnciau]

Fixed in #6480