Merge pull request #1273 from tailwindcss/transition-utilities

Add transition utilities

Author: adamwathan

__tests__/fixtures/tailwind-output-important.css

@@ -10294,6 +10294,78 @@ video {
   --transform-translate-y: 100% !important;
 }
 
+.transition-none {
+  transition-property: none !important;
+}
+
+.transition-all {
+  transition-property: all !important;
+}
+
+.transition {
+  transition-property: background-color, border-color, color, opacity, transform !important;
+}
+
+.transition-colors {
+  transition-property: background-color, border-color, color !important;
+}
+
+.transition-opacity {
+  transition-property: opacity !important;
+}
+
+.transition-transform {
+  transition-property: transform !important;
+}
+
+.ease-linear {
+  transition-timing-function: linear !important;
+}
+
+.ease-in {
+  transition-timing-function: cubic-bezier(0.4, 0, 1, 1) !important;
+}
+
+.ease-out {
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1) !important;
+}
+
+.ease-in-out {
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
+}
+
+.duration-75 {
+  transition-duration: 75ms !important;
+}
+
+.duration-100 {
+  transition-duration: 100ms !important;
+}
+
+.duration-150 {
+  transition-duration: 150ms !important;
+}
+
+.duration-200 {
+  transition-duration: 200ms !important;
+}
+
+.duration-300 {
+  transition-duration: 300ms !important;
+}
+
+.duration-500 {
+  transition-duration: 500ms !important;
+}
+
+.duration-700 {
+  transition-duration: 700ms !important;
+}
+
+.duration-1000 {
+  transition-duration: 1000ms !important;
+}
+
 .example {
   font-weight: 700;
   color: #f56565;
@@ -19989,6 +20061,78 @@ video {
     --transform-translate-y: 100% !important;
   }
 
+  .sm\:transition-none {
+    transition-property: none !important;
+  }
+
+  .sm\:transition-all {
+    transition-property: all !important;
+  }
+
+  .sm\:transition {
+    transition-property: background-color, border-color, color, opacity, transform !important;
+  }
+
+  .sm\:transition-colors {
+    transition-property: background-color, border-color, color !important;
+  }
+
+  .sm\:transition-opacity {
+    transition-property: opacity !important;
+  }
+
+  .sm\:transition-transform {
+    transition-property: transform !important;
+  }
+
+  .sm\:ease-linear {
+    transition-timing-function: linear !important;
+  }
+
+  .sm\:ease-in {
+    transition-timing-function: cubic-bezier(0.4, 0, 1, 1) !important;
+  }
+
+  .sm\:ease-out {
+    transition-timing-function: cubic-bezier(0, 0, 0.2, 1) !important;
+  }
+
+  .sm\:ease-in-out {
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
+  }
+
+  .sm\:duration-75 {
+    transition-duration: 75ms !important;
+  }
+
+  .sm\:duration-100 {
+    transition-duration: 100ms !important;
+  }
+
+  .sm\:duration-150 {
+    transition-duration: 150ms !important;
+  }
+
+  .sm\:duration-200 {
+    transition-duration: 200ms !important;
+  }
+
+  .sm\:duration-300 {
+    transition-duration: 300ms !important;
+  }
+
+  .sm\:duration-500 {
+    transition-duration: 500ms !important;
+  }
+
+  .sm\:duration-700 {
+    transition-duration: 700ms !important;
+  }
+
+  .sm\:duration-1000 {
+    transition-duration: 1000ms !important;
+  }
+
   .sm\:example {
     font-weight: 700;
     color: #f56565;
@@ -29685,6 +29829,78 @@ video {
     --transform-translate-y: 100% !important;
   }
 
+  .md\:transition-none {
+    transition-property: none !important;
+  }
+
+  .md\:transition-all {
+    transition-property: all !important;
+  }
+
+  .md\:transition {
+    transition-property: background-color, border-color, color, opacity, transform !important;
+  }
+
+  .md\:transition-colors {
+    transition-property: background-color, border-color, color !important;
+  }
+
+  .md\:transition-opacity {
+    transition-property: opacity !important;
+  }
+
+  .md\:transition-transform {
+    transition-property: transform !important;
+  }
+
+  .md\:ease-linear {
+    transition-timing-function: linear !important;
+  }
+
+  .md\:ease-in {
+    transition-timing-function: cubic-bezier(0.4, 0, 1, 1) !important;
+  }
+
+  .md\:ease-out {
+    transition-timing-function: cubic-bezier(0, 0, 0.2, 1) !important;
+  }
+
+  .md\:ease-in-out {
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
+  }
+
+  .md\:duration-75 {
+    transition-duration: 75ms !important;
+  }
+
+  .md\:duration-100 {
+    transition-duration: 100ms !important;
+  }
+
+  .md\:duration-150 {
+    transition-duration: 150ms !important;
+  }
+
+  .md\:duration-200 {
+    transition-duration: 200ms !important;
+  }
+
+  .md\:duration-300 {
+    transition-duration: 300ms !important;
+  }
+
+  .md\:duration-500 {
+    transition-duration: 500ms !important;
+  }
+
+  .md\:duration-700 {
+    transition-duration: 700ms !important;
+  }
+
+  .md\:duration-1000 {
+    transition-duration: 1000ms !important;
+  }
+
   .md\:example {
     font-weight: 700;
     color: #f56565;
@@ -39381,6 +39597,78 @@ video {
     --transform-translate-y: 100% !important;
   }
 
+  .lg\:transition-none {
+    transition-property: none !important;
+  }
+
+  .lg\:transition-all {
+    transition-property: all !important;
+  }
+
+  .lg\:transition {
+    transition-property: background-color, border-color, color, opacity, transform !important;
+  }
+
+  .lg\:transition-colors {
+    transition-property: background-color, border-color, color !important;
+  }
+
+  .lg\:transition-opacity {
+    transition-property: opacity !important;
+  }
+
+  .lg\:transition-transform {
+    transition-property: transform !important;
+  }
+
+  .lg\:ease-linear {
+    transition-timing-function: linear !important;
+  }
+
+  .lg\:ease-in {
+    transition-timing-function: cubic-bezier(0.4, 0, 1, 1) !important;
+  }
+
+  .lg\:ease-out {
+    transition-timing-function: cubic-bezier(0, 0, 0.2, 1) !important;
+  }
+
+  .lg\:ease-in-out {
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
+  }
+
+  .lg\:duration-75 {
+    transition-duration: 75ms !important;
+  }
+
+  .lg\:duration-100 {
+    transition-duration: 100ms !important;
+  }
+
+  .lg\:duration-150 {
+    transition-duration: 150ms !important;
+  }
+
+  .lg\:duration-200 {
+    transition-duration: 200ms !important;
+  }
+
+  .lg\:duration-300 {
+    transition-duration: 300ms !important;
+  }
+
+  .lg\:duration-500 {
+    transition-duration: 500ms !important;
+  }
+
+  .lg\:duration-700 {
+    transition-duration: 700ms !important;
+  }
+
+  .lg\:duration-1000 {
+    transition-duration: 1000ms !important;
+  }
+
   .lg\:example {
     font-weight: 700;
     color: #f56565;
@@ -49077,6 +49365,78 @@ video {
     --transform-translate-y: 100% !important;
   }
 
+  .xl\:transition-none {
+    transition-property: none !important;
+  }
+
+  .xl\:transition-all {
+    transition-property: all !important;
+  }
+
+  .xl\:transition {
+    transition-property: background-color, border-color, color, opacity, transform !important;
+  }
+
+  .xl\:transition-colors {
+    transition-property: background-color, border-color, color !important;
+  }
+
+  .xl\:transition-opacity {
+    transition-property: opacity !important;
+  }
+
+  .xl\:transition-transform {
+    transition-property: transform !important;
+  }
+
+  .xl\:ease-linear {
+    transition-timing-function: linear !important;
+  }
+
+  .xl\:ease-in {
+    transition-timing-function: cubic-bezier(0.4, 0, 1, 1) !important;
+  }
+
+  .xl\:ease-out {
+    transition-timing-function: cubic-bezier(0, 0, 0.2, 1) !important;
+  }
+
+  .xl\:ease-in-out {
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
+  }
+
+  .xl\:duration-75 {
+    transition-duration: 75ms !important;
+  }
+
+  .xl\:duration-100 {
+    transition-duration: 100ms !important;
+  }
+
+  .xl\:duration-150 {
+    transition-duration: 150ms !important;
+  }
+
+  .xl\:duration-200 {
+    transition-duration: 200ms !important;
+  }
+
+  .xl\:duration-300 {
+    transition-duration: 300ms !important;
+  }
+
+  .xl\:duration-500 {
+    transition-duration: 500ms !important;
+  }
+
+  .xl\:duration-700 {
+    transition-duration: 700ms !important;
+  }
+
+  .xl\:duration-1000 {
+    transition-duration: 1000ms !important;
+  }
+
   .xl\:example {
     font-weight: 700;
     color: #f56565;