diff --git a/CHANGELOG.md b/CHANGELOG.md
index eb8fb4f34012..e973fcc97524 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Preserve case of css variables added by plugins ([#6888](https://github.com/tailwindlabs/tailwindcss/pull/6888))
 
 ## [3.0.10] - 2022-01-04
 
diff --git a/package-lock.json b/package-lock.json
index bd5e0c77b984..67669e8607df 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,7 +22,7 @@
         "is-glob": "^4.0.3",
         "normalize-path": "^3.0.0",
         "object-hash": "^2.2.0",
-        "postcss-js": "^3.0.3",
+        "postcss-js": "^4.0.0",
         "postcss-load-config": "^3.1.0",
         "postcss-nested": "5.0.6",
         "postcss-selector-parser": "^6.0.7",
@@ -5431,19 +5431,21 @@
       }
     },
     "node_modules/postcss-js": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-3.0.3.tgz",
-      "integrity": "sha512-gWnoWQXKFw65Hk/mi2+WTQTHdPD5UJdDXZmX073EY/B3BWnYjO4F4t0VneTCnCGQ5E5GsCdMkzPaTXwl3r5dJw==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz",
+      "integrity": "sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==",
       "dependencies": {
-        "camelcase-css": "^2.0.1",
-        "postcss": "^8.1.6"
+        "camelcase-css": "^2.0.1"
       },
       "engines": {
-        "node": ">=10.0"
+        "node": "^12 || ^14 || >= 16"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.3.3"
       }
     },
     "node_modules/postcss-load-config": {
@@ -10777,12 +10779,11 @@
       "requires": {}
     },
     "postcss-js": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-3.0.3.tgz",
-      "integrity": "sha512-gWnoWQXKFw65Hk/mi2+WTQTHdPD5UJdDXZmX073EY/B3BWnYjO4F4t0VneTCnCGQ5E5GsCdMkzPaTXwl3r5dJw==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz",
+      "integrity": "sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==",
       "requires": {
-        "camelcase-css": "^2.0.1",
-        "postcss": "^8.1.6"
+        "camelcase-css": "^2.0.1"
       }
     },
     "postcss-load-config": {
diff --git a/package.json b/package.json
index 254ba41e8e79..b6b30541768a 100644
--- a/package.json
+++ b/package.json
@@ -79,7 +79,7 @@
     "is-glob": "^4.0.3",
     "normalize-path": "^3.0.0",
     "object-hash": "^2.2.0",
-    "postcss-js": "^3.0.3",
+    "postcss-js": "^4.0.0",
     "postcss-load-config": "^3.1.0",
     "postcss-nested": "5.0.6",
     "postcss-selector-parser": "^6.0.7",
diff --git a/tests/custom-plugins.test.js b/tests/custom-plugins.test.js
index b85b407254c0..0b1b0860fb07 100644
--- a/tests/custom-plugins.test.js
+++ b/tests/custom-plugins.test.js
@@ -1892,3 +1892,22 @@ test('animation values are joined when retrieved using the theme function', () =
     `)
   })
 })
+
+test('custom properties are not converted to kebab-case when added to base layer', () => {
+  let config = {
+    content: [],
+    plugins: [
+      function ({ addBase }) {
+        addBase({
+          ':root': {
+            '--colors-primaryThing-500': '0, 0, 255',
+          },
+        })
+      },
+    ],
+  }
+
+  return run('@tailwind base', config).then((result) => {
+    expect(result.css).toContain(`--colors-primaryThing-500: 0, 0, 255;`)
+  })
+})
diff --git a/tests/parseObjectStyles.test.js b/tests/parseObjectStyles.test.js
index db10915cc9c4..06aa06c8674f 100644
--- a/tests/parseObjectStyles.test.js
+++ b/tests/parseObjectStyles.test.js
@@ -300,3 +300,17 @@ test('it can parse an array of styles', () => {
     }
   `)
 })
+
+test('custom properties preserve their case', () => {
+  const result = parseObjectStyles({
+    ':root': {
+      '--colors-aColor-500': '0',
+    },
+  })
+
+  expect(css(result)).toMatchCss(`
+    :root {
+      --colors-aColor-500: 0;
+    }
+  `)
+})