diff --git a/CHANGELOG.md b/CHANGELOG.md
index ea1cf91950b9..80665591d0fa 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Add support fo configuring default `font-feature-settings` for a font family ([#9039](https://github.com/tailwindlabs/tailwindcss/pull/9039))
 - Add a standalone CLI build for 32-bit Linux on ARM (`node16-linux-armv7`) ([#9084](https://github.com/tailwindlabs/tailwindcss/pull/9084))
+- Add future flag to disable color opacity utility plugins ([#9088](https://github.com/tailwindlabs/tailwindcss/pull/9088))
 
 ### Fixed
 
diff --git a/src/featureFlags.js b/src/featureFlags.js
index 57d4d854e873..5e9d73583499 100644
--- a/src/featureFlags.js
+++ b/src/featureFlags.js
@@ -6,7 +6,11 @@ let defaults = {
 }
 
 let featureFlags = {
-  future: ['hoverOnlyWhenSupported', 'respectDefaultRingColorOpacity'],
+  future: [
+    'hoverOnlyWhenSupported',
+    'respectDefaultRingColorOpacity',
+    'disableColorOpacityUtilitiesByDefault',
+  ],
   experimental: ['optimizeUniversalDefaults', 'matchVariant' /* , 'variantGrouping' */],
 }
 
diff --git a/src/util/getAllConfigs.js b/src/util/getAllConfigs.js
index 70e20ca5a306..ebf28e172e3a 100644
--- a/src/util/getAllConfigs.js
+++ b/src/util/getAllConfigs.js
@@ -17,6 +17,17 @@ export default function getAllConfigs(config) {
         }),
       },
     },
+
+    disableColorOpacityUtilitiesByDefault: {
+      corePlugins: {
+        backgroundOpacity: false,
+        borderOpacity: false,
+        divideOpacity: false,
+        placeholderOpacity: false,
+        ringOpacity: false,
+        textOpacity: false,
+      },
+    },
   }
 
   const experimentals = Object.keys(features)
diff --git a/tests/opacity.test.js b/tests/opacity.test.js
index c0cd3066e5ac..672460266635 100644
--- a/tests/opacity.test.js
+++ b/tests/opacity.test.js
@@ -828,3 +828,205 @@ it('works with opacity values defined as a placeholder or a function in when col
     `)
   })
 })
+
+it('The disableColorOpacityUtilitiesByDefault flag disables the color opacity plugins and removes their variables', () => {
+  let config = {
+    future: {
+      disableColorOpacityUtilitiesByDefault: true,
+    },
+    content: [
+      {
+        raw: html`
+          <div
+            class="divide-blue-300 border-blue-300 bg-blue-300 text-blue-300 placeholder-blue-300 ring-blue-300"
+          ></div>
+          <div
+            class="divide-blue-300/50 border-blue-300/50 bg-blue-300/50 text-blue-300/50 placeholder-blue-300/50 ring-blue-300/50"
+          ></div>
+          <div
+            class="divide-blue-300/[var(--my-opacity)] border-blue-300/[var(--my-opacity)] bg-blue-300/[var(--my-opacity)] text-blue-300/[var(--my-opacity)] placeholder-blue-300/[var(--my-opacity)] ring-blue-300/[var(--my-opacity)]"
+          ></div>
+          <div
+            class="divide-opacity-50 border-opacity-50 bg-opacity-50 text-opacity-50 placeholder-opacity-50 ring-opacity-50"
+          ></div>
+        `,
+      },
+    ],
+  }
+
+  return run('@tailwind utilities', config).then((result) => {
+    expect(result.css).toMatchCss(css`
+      .divide-blue-300 > :not([hidden]) ~ :not([hidden]) {
+        border-color: #93c5fd;
+      }
+      .divide-blue-300\/50 > :not([hidden]) ~ :not([hidden]) {
+        border-color: rgb(147 197 253 / 0.5);
+      }
+      .divide-blue-300\/\[var\(--my-opacity\)\] > :not([hidden]) ~ :not([hidden]) {
+        border-color: rgb(147 197 253 / var(--my-opacity));
+      }
+      .border-blue-300 {
+        border-color: #93c5fd;
+      }
+      .border-blue-300\/50 {
+        border-color: rgb(147 197 253 / 0.5);
+      }
+      .border-blue-300\/\[var\(--my-opacity\)\] {
+        border-color: rgb(147 197 253 / var(--my-opacity));
+      }
+      .bg-blue-300 {
+        background-color: #93c5fd;
+      }
+      .bg-blue-300\/50 {
+        background-color: rgb(147 197 253 / 0.5);
+      }
+      .bg-blue-300\/\[var\(--my-opacity\)\] {
+        background-color: rgb(147 197 253 / var(--my-opacity));
+      }
+      .text-blue-300 {
+        color: #93c5fd;
+      }
+      .text-blue-300\/50 {
+        color: rgb(147 197 253 / 0.5);
+      }
+      .text-blue-300\/\[var\(--my-opacity\)\] {
+        color: rgb(147 197 253 / var(--my-opacity));
+      }
+      .placeholder-blue-300::placeholder {
+        color: #93c5fd;
+      }
+      .placeholder-blue-300\/50::placeholder {
+        color: rgb(147 197 253 / 0.5);
+      }
+      .placeholder-blue-300\/\[var\(--my-opacity\)\]::placeholder {
+        color: rgb(147 197 253 / var(--my-opacity));
+      }
+      .ring-blue-300 {
+        --tw-ring-color: #93c5fd;
+      }
+      .ring-blue-300\/50 {
+        --tw-ring-color: rgb(147 197 253 / 0.5);
+      }
+      .ring-blue-300\/\[var\(--my-opacity\)\] {
+        --tw-ring-color: rgb(147 197 253 / var(--my-opacity));
+      }
+    `)
+  })
+})
+
+it('You can re-enable any opacity plugin even when disableColorOpacityUtilitiesByDefault is enabled', () => {
+  let config = {
+    future: {
+      disableColorOpacityUtilitiesByDefault: true,
+    },
+    corePlugins: {
+      backgroundOpacity: true,
+      borderOpacity: true,
+      divideOpacity: true,
+      placeholderOpacity: true,
+      ringOpacity: true,
+      textOpacity: true,
+    },
+    content: [
+      {
+        raw: html`
+          <div
+            class="divide-blue-300 border-blue-300 bg-blue-300 text-blue-300 placeholder-blue-300 ring-blue-300"
+          ></div>
+          <div
+            class="divide-blue-300/50 border-blue-300/50 bg-blue-300/50 text-blue-300/50 placeholder-blue-300/50 ring-blue-300/50"
+          ></div>
+          <div
+            class="divide-blue-300/[var(--my-opacity)] border-blue-300/[var(--my-opacity)] bg-blue-300/[var(--my-opacity)] text-blue-300/[var(--my-opacity)] placeholder-blue-300/[var(--my-opacity)] ring-blue-300/[var(--my-opacity)]"
+          ></div>
+          <div
+            class="divide-opacity-50 border-opacity-50 bg-opacity-50 text-opacity-50 placeholder-opacity-50 ring-opacity-50"
+          ></div>
+        `,
+      },
+    ],
+  }
+
+  return run('@tailwind utilities', config).then((result) => {
+    expect(result.css).toMatchCss(css`
+      .divide-blue-300 > :not([hidden]) ~ :not([hidden]) {
+        --tw-divide-opacity: 1;
+        border-color: rgb(147 197 253 / var(--tw-divide-opacity));
+      }
+      .divide-blue-300\/50 > :not([hidden]) ~ :not([hidden]) {
+        border-color: rgb(147 197 253 / 0.5);
+      }
+      .divide-blue-300\/\[var\(--my-opacity\)\] > :not([hidden]) ~ :not([hidden]) {
+        border-color: rgb(147 197 253 / var(--my-opacity));
+      }
+      .divide-opacity-50 > :not([hidden]) ~ :not([hidden]) {
+        --tw-divide-opacity: 0.5;
+      }
+      .border-blue-300 {
+        --tw-border-opacity: 1;
+        border-color: rgb(147 197 253 / var(--tw-border-opacity));
+      }
+      .border-blue-300\/50 {
+        border-color: rgb(147 197 253 / 0.5);
+      }
+      .border-blue-300\/\[var\(--my-opacity\)\] {
+        border-color: rgb(147 197 253 / var(--my-opacity));
+      }
+      .border-opacity-50 {
+        --tw-border-opacity: 0.5;
+      }
+      .bg-blue-300 {
+        --tw-bg-opacity: 1;
+        background-color: rgb(147 197 253 / var(--tw-bg-opacity));
+      }
+      .bg-blue-300\/50 {
+        background-color: rgb(147 197 253 / 0.5);
+      }
+      .bg-blue-300\/\[var\(--my-opacity\)\] {
+        background-color: rgb(147 197 253 / var(--my-opacity));
+      }
+      .bg-opacity-50 {
+        --tw-bg-opacity: 0.5;
+      }
+      .text-blue-300 {
+        --tw-text-opacity: 1;
+        color: rgb(147 197 253 / var(--tw-text-opacity));
+      }
+      .text-blue-300\/50 {
+        color: rgb(147 197 253 / 0.5);
+      }
+      .text-blue-300\/\[var\(--my-opacity\)\] {
+        color: rgb(147 197 253 / var(--my-opacity));
+      }
+      .text-opacity-50 {
+        --tw-text-opacity: 0.5;
+      }
+      .placeholder-blue-300::placeholder {
+        --tw-placeholder-opacity: 1;
+        color: rgb(147 197 253 / var(--tw-placeholder-opacity));
+      }
+      .placeholder-blue-300\/50::placeholder {
+        color: rgb(147 197 253 / 0.5);
+      }
+      .placeholder-blue-300\/\[var\(--my-opacity\)\]::placeholder {
+        color: rgb(147 197 253 / var(--my-opacity));
+      }
+      .placeholder-opacity-50::placeholder {
+        --tw-placeholder-opacity: 0.5;
+      }
+      .ring-blue-300 {
+        --tw-ring-opacity: 1;
+        --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity));
+      }
+      .ring-blue-300\/50 {
+        --tw-ring-color: rgb(147 197 253 / 0.5);
+      }
+      .ring-blue-300\/\[var\(--my-opacity\)\] {
+        --tw-ring-color: rgb(147 197 253 / var(--my-opacity));
+      }
+      .ring-opacity-50 {
+        --tw-ring-opacity: 0.5;
+      }
+    `)
+  })
+})