diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5e8aca2f9b28..be516015c6a0 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
+
+- Ensure to transpile the PostCSS Nesting plugin (tailwindcss/nesting) ([#7080](https://github.com/tailwindlabs/tailwindcss/pull/7080))
 
 ## [3.0.15] - 2022-01-15
 
diff --git a/nesting/index.js b/nesting/index.js
index 273814a75b2d..defd79306bc1 100644
--- a/nesting/index.js
+++ b/nesting/index.js
@@ -1,12 +1,2 @@
-let nesting = require('./plugin')
-
-module.exports = (opts) => {
-  return {
-    postcssPlugin: 'tailwindcss/nesting',
-    Once(root, { result }) {
-      return nesting(opts)(root, result)
-    },
-  }
-}
-
-module.exports.postcss = true
+let nesting = require('../lib/postcss-plugins/nesting')
+module.exports = (nesting.__esModule ? nesting : { default: nesting }).default
diff --git a/nesting/README.md b/src/postcss-plugins/nesting/README.md
similarity index 100%
rename from nesting/README.md
rename to src/postcss-plugins/nesting/README.md
diff --git a/src/postcss-plugins/nesting/index.js b/src/postcss-plugins/nesting/index.js
new file mode 100644
index 000000000000..9fbcddf35f1c
--- /dev/null
+++ b/src/postcss-plugins/nesting/index.js
@@ -0,0 +1,13 @@
+import { nesting } from './plugin'
+
+export default Object.assign(
+  function (opts) {
+    return {
+      postcssPlugin: 'tailwindcss/nesting',
+      Once(root, { result }) {
+        return nesting(opts)(root, result)
+      },
+    }
+  },
+  { postcss: true }
+)
diff --git a/nesting/plugin.js b/src/postcss-plugins/nesting/plugin.js
similarity index 81%
rename from nesting/plugin.js
rename to src/postcss-plugins/nesting/plugin.js
index b286ad1d6864..3b1434d82ed1 100644
--- a/nesting/plugin.js
+++ b/src/postcss-plugins/nesting/plugin.js
@@ -1,7 +1,7 @@
-let postcss = require('postcss')
-let postcssNested = require('postcss-nested')
+import postcss from 'postcss'
+import postcssNested from 'postcss-nested'
 
-module.exports = function nesting(opts = postcssNested) {
+export function nesting(opts = postcssNested) {
   return (root, result) => {
     root.walkAtRules('screen', (rule) => {
       rule.name = 'media'
@@ -16,7 +16,7 @@ module.exports = function nesting(opts = postcssNested) {
     let plugin = (() => {
       if (
         typeof opts === 'function' ||
-        (typeof opts === 'object' && opts.hasOwnProperty('postcssPlugin'))
+        (typeof opts === 'object' && opts?.hasOwnProperty?.('postcssPlugin'))
       ) {
         return opts
       }
diff --git a/tests/postcss-plugins/nesting/index.test.js b/tests/postcss-plugins/nesting/index.test.js
index 2fcfb731d71a..482622ed3343 100644
--- a/tests/postcss-plugins/nesting/index.test.js
+++ b/tests/postcss-plugins/nesting/index.test.js
@@ -1,6 +1,6 @@
-let postcss = require('postcss')
-let postcssNested = require('postcss-nested')
-let plugin = require('../../../nesting')
+import postcss from 'postcss'
+import postcssNested from 'postcss-nested'
+import plugin from '../../../src/postcss-plugins/nesting'
 
 it('should be possible to load a custom nesting plugin', async () => {
   let input = css`