Merge pull request tailwindlabs#1352 from tailwindcss/transition-shadow

adamwathan · web-flow · commit 12c4c7da132e · 2020-02-01T13:50:57.000-05:00
Add `transition-shadow`, transition box-shadow in `transition` also
diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css
@@ -10327,7 +10327,7 @@ video {
 }
 
 .transition {
-  transition-property: background-color, border-color, color, fill, stroke, opacity,transform !important;
+  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform !important;
 }
 
 .transition-colors {
@@ -10338,6 +10338,10 @@ video {
   transition-property: opacity !important;
 }
 
+.transition-shadow {
+  transition-property: box-shadow !important;
+}
+
 .transition-transform {
   transition-property: transform !important;
 }
@@ -20118,7 +20122,7 @@ video {
   }
 
   .sm\:transition {
-    transition-property: background-color, border-color, color, fill, stroke, opacity,transform !important;
+    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform !important;
   }
 
   .sm\:transition-colors {
@@ -20129,6 +20133,10 @@ video {
     transition-property: opacity !important;
   }
 
+  .sm\:transition-shadow {
+    transition-property: box-shadow !important;
+  }
+
   .sm\:transition-transform {
     transition-property: transform !important;
   }
@@ -29910,7 +29918,7 @@ video {
   }
 
   .md\:transition {
-    transition-property: background-color, border-color, color, fill, stroke, opacity,transform !important;
+    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform !important;
   }
 
   .md\:transition-colors {
@@ -29921,6 +29929,10 @@ video {
     transition-property: opacity !important;
   }
 
+  .md\:transition-shadow {
+    transition-property: box-shadow !important;
+  }
+
   .md\:transition-transform {
     transition-property: transform !important;
   }
@@ -39702,7 +39714,7 @@ video {
   }
 
   .lg\:transition {
-    transition-property: background-color, border-color, color, fill, stroke, opacity,transform !important;
+    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform !important;
   }
 
   .lg\:transition-colors {
@@ -39713,6 +39725,10 @@ video {
     transition-property: opacity !important;
   }
 
+  .lg\:transition-shadow {
+    transition-property: box-shadow !important;
+  }
+
   .lg\:transition-transform {
     transition-property: transform !important;
   }
@@ -49494,7 +49510,7 @@ video {
   }
 
   .xl\:transition {
-    transition-property: background-color, border-color, color, fill, stroke, opacity,transform !important;
+    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform !important;
   }
 
   .xl\:transition-colors {
@@ -49505,6 +49521,10 @@ video {
     transition-property: opacity !important;
   }
 
+  .xl\:transition-shadow {
+    transition-property: box-shadow !important;
+  }
+
   .xl\:transition-transform {
     transition-property: transform !important;
   }
diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
@@ -10327,7 +10327,7 @@ video {
 }
 
 .transition {
-  transition-property: background-color, border-color, color, fill, stroke, opacity,transform;
+  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
 }
 
 .transition-colors {
@@ -10338,6 +10338,10 @@ video {
   transition-property: opacity;
 }
 
+.transition-shadow {
+  transition-property: box-shadow;
+}
+
 .transition-transform {
   transition-property: transform;
 }
@@ -20118,7 +20122,7 @@ video {
   }
 
   .sm\:transition {
-    transition-property: background-color, border-color, color, fill, stroke, opacity,transform;
+    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
   }
 
   .sm\:transition-colors {
@@ -20129,6 +20133,10 @@ video {
     transition-property: opacity;
   }
 
+  .sm\:transition-shadow {
+    transition-property: box-shadow;
+  }
+
   .sm\:transition-transform {
     transition-property: transform;
   }
@@ -29910,7 +29918,7 @@ video {
   }
 
   .md\:transition {
-    transition-property: background-color, border-color, color, fill, stroke, opacity,transform;
+    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
   }
 
   .md\:transition-colors {
@@ -29921,6 +29929,10 @@ video {
     transition-property: opacity;
   }
 
+  .md\:transition-shadow {
+    transition-property: box-shadow;
+  }
+
   .md\:transition-transform {
     transition-property: transform;
   }
@@ -39702,7 +39714,7 @@ video {
   }
 
   .lg\:transition {
-    transition-property: background-color, border-color, color, fill, stroke, opacity,transform;
+    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
   }
 
   .lg\:transition-colors {
@@ -39713,6 +39725,10 @@ video {
     transition-property: opacity;
   }
 
+  .lg\:transition-shadow {
+    transition-property: box-shadow;
+  }
+
   .lg\:transition-transform {
     transition-property: transform;
   }
@@ -49494,7 +49510,7 @@ video {
   }
 
   .xl\:transition {
-    transition-property: background-color, border-color, color, fill, stroke, opacity,transform;
+    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
   }
 
   .xl\:transition-colors {
@@ -49505,6 +49521,10 @@ video {
     transition-property: opacity;
   }
 
+  .xl\:transition-shadow {
+    transition-property: box-shadow;
+  }
+
   .xl\:transition-transform {
     transition-property: transform;
   }
diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js
@@ -528,9 +528,10 @@ module.exports = {
     transitionProperty: {
       none: 'none',
       all: 'all',
-      default: 'background-color, border-color, color, fill, stroke, opacity,transform',
+      default: 'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform',
       colors: 'background-color, border-color, color, fill, stroke',
       opacity: 'opacity',
+      shadow: 'box-shadow',
       transform: 'transform',
     },
     transitionTimingFunction: {

Original file line number	Diff line number	Diff line change
`@@ -10327,7 +10327,7 @@ video {`
`10327`	`10327`	`}`
`10328`	`10328`
`10329`	`10329`	`.transition {`
`10330`		`- transition-property: background-color, border-color, color, fill, stroke, opacity,transform !important;`
	`10330`	`+ transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform !important;`
`10331`	`10331`	`}`
`10332`	`10332`
`10333`	`10333`	`.transition-colors {`
`@@ -10338,6 +10338,10 @@ video {`
`10338`	`10338`	`transition-property: opacity !important;`
`10339`	`10339`	`}`
`10340`	`10340`
	`10341`	`+.transition-shadow {`
	`10342`	`+ transition-property: box-shadow !important;`
	`10343`	`+}`
	`10344`	`+`
`10341`	`10345`	`.transition-transform {`
`10342`	`10346`	`transition-property: transform !important;`
`10343`	`10347`	`}`
`@@ -20118,7 +20122,7 @@ video {`
`20118`	`20122`	`}`
`20119`	`20123`
`20120`	`20124`	`.sm\:transition {`
`20121`		`- transition-property: background-color, border-color, color, fill, stroke, opacity,transform !important;`
	`20125`	`+ transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform !important;`
`20122`	`20126`	`}`
`20123`	`20127`
`20124`	`20128`	`.sm\:transition-colors {`
`@@ -20129,6 +20133,10 @@ video {`
`20129`	`20133`	`transition-property: opacity !important;`
`20130`	`20134`	`}`
`20131`	`20135`
	`20136`	`+ .sm\:transition-shadow {`
	`20137`	`+ transition-property: box-shadow !important;`
	`20138`	`+ }`
	`20139`	`+`
`20132`	`20140`	`.sm\:transition-transform {`
`20133`	`20141`	`transition-property: transform !important;`
`20134`	`20142`	`}`
`@@ -29910,7 +29918,7 @@ video {`
`29910`	`29918`	`}`
`29911`	`29919`
`29912`	`29920`	`.md\:transition {`
`29913`		`- transition-property: background-color, border-color, color, fill, stroke, opacity,transform !important;`
	`29921`	`+ transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform !important;`
`29914`	`29922`	`}`
`29915`	`29923`
`29916`	`29924`	`.md\:transition-colors {`
`@@ -29921,6 +29929,10 @@ video {`
`29921`	`29929`	`transition-property: opacity !important;`
`29922`	`29930`	`}`
`29923`	`29931`
	`29932`	`+ .md\:transition-shadow {`
	`29933`	`+ transition-property: box-shadow !important;`
	`29934`	`+ }`
	`29935`	`+`
`29924`	`29936`	`.md\:transition-transform {`
`29925`	`29937`	`transition-property: transform !important;`
`29926`	`29938`	`}`
`@@ -39702,7 +39714,7 @@ video {`
`39702`	`39714`	`}`
`39703`	`39715`
`39704`	`39716`	`.lg\:transition {`
`39705`		`- transition-property: background-color, border-color, color, fill, stroke, opacity,transform !important;`
	`39717`	`+ transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform !important;`
`39706`	`39718`	`}`
`39707`	`39719`
`39708`	`39720`	`.lg\:transition-colors {`
`@@ -39713,6 +39725,10 @@ video {`
`39713`	`39725`	`transition-property: opacity !important;`
`39714`	`39726`	`}`
`39715`	`39727`
	`39728`	`+ .lg\:transition-shadow {`
	`39729`	`+ transition-property: box-shadow !important;`
	`39730`	`+ }`
	`39731`	`+`
`39716`	`39732`	`.lg\:transition-transform {`
`39717`	`39733`	`transition-property: transform !important;`
`39718`	`39734`	`}`
`@@ -49494,7 +49510,7 @@ video {`
`49494`	`49510`	`}`
`49495`	`49511`
`49496`	`49512`	`.xl\:transition {`
`49497`		`- transition-property: background-color, border-color, color, fill, stroke, opacity,transform !important;`
	`49513`	`+ transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform !important;`
`49498`	`49514`	`}`
`49499`	`49515`
`49500`	`49516`	`.xl\:transition-colors {`
`@@ -49505,6 +49521,10 @@ video {`
`49505`	`49521`	`transition-property: opacity !important;`
`49506`	`49522`	`}`
`49507`	`49523`
	`49524`	`+ .xl\:transition-shadow {`
	`49525`	`+ transition-property: box-shadow !important;`
	`49526`	`+ }`
	`49527`	`+`
`49508`	`49528`	`.xl\:transition-transform {`
`49509`	`49529`	`transition-property: transform !important;`
`49510`	`49530`	`}`