update outline-hidden to only apply in forced colors mode

Author: RobinMalfait

packages/tailwindcss/src/utilities.test.ts

@@ -14543,6 +14543,7 @@ test('outline', async () => {
       `,
       [
         'outline',
+        'outline-hidden',
 
         // outline-style
         'outline-none',
@@ -14594,6 +14595,17 @@ test('outline', async () => {
       --color-red-500: #ef4444;
     }
 
+    .outline-hidden {
+      outline-style: none;
+    }
+
+    @media screen and (forced-colors: active) {
+      .outline-hidden {
+        outline-offset: 2px;
+        outline: 2px solid #0000;
+      }
+    }
+
     .outline {
       outline-style: var(--tw-outline-style);
       outline-width: 1px;

packages/tailwindcss/src/utilities.ts

@@ -3850,10 +3850,15 @@ export function createUtilities(theme: Theme) {
       return atRoot([property('--tw-outline-style', 'solid')])
     }
 
-    staticUtility('outline-hidden', [
-      ['outline', '2px solid transparent'],
-      ['outline-offset', '2px'],
-    ])
+    utilities.static('outline-hidden', () => {
+      return [
+        decl('outline-style', 'none'),
+        atRule('@media', 'screen and (forced-colors: active)', [
+          decl('outline', '2px solid transparent'),
+          decl('outline-offset', '2px'),
+        ]),
+      ]
+    })
 
     /**
      * @css `outline-style`