From b16eb2034edac3dea2c57f28779f694d029c6805 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Sun, 12 Sep 2021 10:07:57 -0400
Subject: [PATCH] Add arbitrary value support for `transition-property` (#5481)

Co-Authored-By: Eric F. <2483476+ericbf@users.noreply.github.com>

Co-authored-by: Eric F. <2483476+ericbf@users.noreply.github.com>
---
 src/corePlugins.js               | 2 +-
 tests/arbitrary-values.test.css  | 5 +++++
 tests/arbitrary-values.test.html | 1 +
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/corePlugins.js b/src/corePlugins.js
index fab1b56c7830..26bdb4da1831 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -2195,7 +2195,7 @@ export let transitionProperty = ({ matchUtilities, theme }) => {
         }
       },
     },
-    { values: theme('transitionProperty'), type: 'lookup' }
+    { values: theme('transitionProperty'), type: 'any' }
   )
 }
 
diff --git a/tests/arbitrary-values.test.css b/tests/arbitrary-values.test.css
index 3eb51fa9cf81..3d6317010ada 100644
--- a/tests/arbitrary-values.test.css
+++ b/tests/arbitrary-values.test.css
@@ -448,6 +448,11 @@
   --tw-backdrop-sepia: sepia(0.38);
   backdrop-filter: var(--tw-backdrop-filter);
 }
+.transition-\[opacity\2c width\] {
+  transition-property: opacity, width;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .delay-\[var\(--delay\)\] {
   transition-delay: var(--delay);
 }
diff --git a/tests/arbitrary-values.test.html b/tests/arbitrary-values.test.html
index 3c55dd90406b..1db1a4f262ed 100644
--- a/tests/arbitrary-values.test.html
+++ b/tests/arbitrary-values.test.html
@@ -60,6 +60,7 @@
     <div class="text-[length:var(--font-size)]"></div>
     <div class="text-[color:var(--color)]"></div>
     <div class="text-[angle:var(--angle)]"></div>
+    <div class="transition-[opacity,width]"></div>
     <div class="duration-[2s]"></div>
     <div class="m-[7px]"></div>
     <div class="mx-[7px]"></div>