Include outline-color in default color properties to transition

Co-Authored-By: Dilshod <28673719+deebov@users.noreply.github.com>

Author: adamwathan

CHANGELOG.md

@@ -45,6 +45,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Alphabetize `theme` keys in default config ([#9953](https://github.com/tailwindlabs/tailwindcss/pull/9953))
 - Update esbuild to v17 ([#10368](https://github.com/tailwindlabs/tailwindcss/pull/10368))
+- Include `outline-color` in `transition` and `transition-colors` utilitires ([#10385](https://github.com/tailwindlabs/tailwindcss/pull/10385))
 
 ## [3.2.4] - 2022-11-11
 

stubs/defaultConfig.stub.js

@@ -878,8 +878,8 @@ module.exports = {
       none: 'none',
       all: 'all',
       DEFAULT:
-        'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
-      colors: 'color, background-color, border-color, text-decoration-color, fill, stroke',
+        'color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
+      colors: 'color, background-color, border-color, outline-color, text-decoration-color, fill, stroke',
       opacity: 'opacity',
       shadow: 'box-shadow',
       transform: 'transform',

tests/basic-usage.oxide.test.css

@@ -1059,8 +1059,8 @@
   backdrop-filter: none;
 }
 .transition {
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
-    opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, outline-color, text-decoration-color,
+    fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }

tests/basic-usage.test.css

@@ -1059,8 +1059,8 @@
   backdrop-filter: none;
 }
 .transition {
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
-    opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, outline-color, text-decoration-color,
+    fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }

tests/kitchen-sink.test.js

@@ -750,8 +750,9 @@ crosscheck(() => {
         }
         @media (prefers-reduced-motion: no-preference) {
           .motion-safe\:transition {
-            transition-property: color, background-color, border-color, text-decoration-color, fill,
-              stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+            transition-property: color, background-color, border-color, outline-color,
+              text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
+              backdrop-filter;
             transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
             transition-duration: 150ms;
           }
@@ -761,8 +762,9 @@ crosscheck(() => {
         }
         @media (prefers-reduced-motion: reduce) {
           .motion-reduce\:transition {
-            transition-property: color, background-color, border-color, text-decoration-color, fill,
-              stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+            transition-property: color, background-color, border-color, outline-color,
+              text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
+              backdrop-filter;
             transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
             transition-duration: 150ms;
           }
@@ -865,8 +867,9 @@ crosscheck(() => {
           }
           @media (prefers-reduced-motion: no-preference) {
             .md\:motion-safe\:hover\:transition:hover {
-              transition-property: color, background-color, border-color, text-decoration-color,
-                fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+              transition-property: color, background-color, border-color, outline-color,
+                text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
+                backdrop-filter;
               transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
               transition-duration: 150ms;
             }

tests/raw-content.oxide.test.css

@@ -757,8 +757,8 @@
   backdrop-filter: none;
 }
 .transition {
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
-    opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, outline-color, text-decoration-color,
+    fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }

tests/raw-content.test.css

@@ -757,8 +757,8 @@
   backdrop-filter: none;
 }
 .transition {
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
-    opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, outline-color, text-decoration-color,
+    fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }