Add arbitrary value support for transition-property (#5481)

Co-Authored-By: Eric F. <[email protected]> Co-authored-by: Eric F. <[email protected]>
tailwindlabs · Sep 12, 2021 · b16eb20 · b16eb20
1 parent bbdda85
commit b16eb20
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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>