diff --git a/CHANGELOG.md b/CHANGELOG.md
index f6b1d39be82a..35689319f6ce 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Don't output unparsable values ([#6469](https://github.com/tailwindlabs/tailwindcss/pull/6469))
+- Support negative values in safelist patterns ([6480](https://github.com/tailwindlabs/tailwindcss/pull/6480))
 
 ## [3.0.2] - 2021-12-13
 
diff --git a/src/lib/setupContextUtils.js b/src/lib/setupContextUtils.js
index b242e8028808..f83a4bb2fab1 100644
--- a/src/lib/setupContextUtils.js
+++ b/src/lib/setupContextUtils.js
@@ -626,7 +626,15 @@ function registerPlugins(plugins, context) {
         let utils = Array.isArray(util)
           ? (() => {
               let [utilName, options] = util
-              return Object.keys(options?.values ?? {}).map((value) => formatClass(utilName, value))
+              let classes = Object.keys(options?.values ?? {}).map((value) =>
+                formatClass(utilName, value)
+              )
+
+              if (options?.supportsNegativeValues) {
+                classes = [...classes, ...classes.map((cls) => '-' + cls)]
+              }
+
+              return classes
             })()
           : [util]
 
diff --git a/tests/safelist.test.js b/tests/safelist.test.js
index 39b47e7acd79..03efab8069ea 100644
--- a/tests/safelist.test.js
+++ b/tests/safelist.test.js
@@ -194,3 +194,31 @@ it('should not safelist when an sparse/holey list is provided', () => {
     `)
   })
 })
+
+it('should safelist negatives based on a pattern regex', () => {
+  let config = {
+    content: [{ raw: html`<div class="uppercase"></div>` }],
+    safelist: [
+      {
+        pattern: /^-top-1$/,
+        variants: ['hover'],
+      },
+    ],
+  }
+
+  return run('@tailwind utilities', config).then((result) => {
+    return expect(result.css).toMatchCss(css`
+      .-top-1 {
+        top: -0.25rem;
+      }
+
+      .uppercase {
+        text-transform: uppercase;
+      }
+
+      .hover\:-top-1:hover {
+        top: -0.25rem;
+      }
+    `)
+  })
+})