Add future flag to disable opacity utility plugins

This will become the default in Tailwind CSS v4.0

Author: thecrypticace

src/featureFlags.js

@@ -6,7 +6,11 @@ let defaults = {
 }
 
 let featureFlags = {
-  future: ['hoverOnlyWhenSupported', 'respectDefaultRingColorOpacity'],
+  future: [
+    'hoverOnlyWhenSupported',
+    'respectDefaultRingColorOpacity',
+    'disableColorOpacityUtilitiesByDefault',
+  ],
   experimental: ['optimizeUniversalDefaults', 'matchVariant' /* , 'variantGrouping' */],
 }
 

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)

tests/opacity.test.js

@@ -828,3 +828,88 @@ 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));
+      }
+    `)
+  })
+})