Merge pull request #1462 from philippbosch/transition-delay

Add support for transition-delay

Author: adamwathan

__tests__/fixtures/tailwind-output-important.css

@@ -10917,6 +10917,38 @@ video {
   transition-duration: 1000ms !important;
 }
 
+.delay-75 {
+  transition-delay: 75ms !important;
+}
+
+.delay-100 {
+  transition-delay: 100ms !important;
+}
+
+.delay-150 {
+  transition-delay: 150ms !important;
+}
+
+.delay-200 {
+  transition-delay: 200ms !important;
+}
+
+.delay-300 {
+  transition-delay: 300ms !important;
+}
+
+.delay-500 {
+  transition-delay: 500ms !important;
+}
+
+.delay-700 {
+  transition-delay: 700ms !important;
+}
+
+.delay-1000 {
+  transition-delay: 1000ms !important;
+}
+
 .example {
   font-weight: 700;
   color: #f56565;
@@ -21234,6 +21266,38 @@ video {
     transition-duration: 1000ms !important;
   }
 
+  .sm\:delay-75 {
+    transition-delay: 75ms !important;
+  }
+
+  .sm\:delay-100 {
+    transition-delay: 100ms !important;
+  }
+
+  .sm\:delay-150 {
+    transition-delay: 150ms !important;
+  }
+
+  .sm\:delay-200 {
+    transition-delay: 200ms !important;
+  }
+
+  .sm\:delay-300 {
+    transition-delay: 300ms !important;
+  }
+
+  .sm\:delay-500 {
+    transition-delay: 500ms !important;
+  }
+
+  .sm\:delay-700 {
+    transition-delay: 700ms !important;
+  }
+
+  .sm\:delay-1000 {
+    transition-delay: 1000ms !important;
+  }
+
   .sm\:example {
     font-weight: 700;
     color: #f56565;
@@ -31552,6 +31616,38 @@ video {
     transition-duration: 1000ms !important;
   }
 
+  .md\:delay-75 {
+    transition-delay: 75ms !important;
+  }
+
+  .md\:delay-100 {
+    transition-delay: 100ms !important;
+  }
+
+  .md\:delay-150 {
+    transition-delay: 150ms !important;
+  }
+
+  .md\:delay-200 {
+    transition-delay: 200ms !important;
+  }
+
+  .md\:delay-300 {
+    transition-delay: 300ms !important;
+  }
+
+  .md\:delay-500 {
+    transition-delay: 500ms !important;
+  }
+
+  .md\:delay-700 {
+    transition-delay: 700ms !important;
+  }
+
+  .md\:delay-1000 {
+    transition-delay: 1000ms !important;
+  }
+
   .md\:example {
     font-weight: 700;
     color: #f56565;
@@ -41870,6 +41966,38 @@ video {
     transition-duration: 1000ms !important;
   }
 
+  .lg\:delay-75 {
+    transition-delay: 75ms !important;
+  }
+
+  .lg\:delay-100 {
+    transition-delay: 100ms !important;
+  }
+
+  .lg\:delay-150 {
+    transition-delay: 150ms !important;
+  }
+
+  .lg\:delay-200 {
+    transition-delay: 200ms !important;
+  }
+
+  .lg\:delay-300 {
+    transition-delay: 300ms !important;
+  }
+
+  .lg\:delay-500 {
+    transition-delay: 500ms !important;
+  }
+
+  .lg\:delay-700 {
+    transition-delay: 700ms !important;
+  }
+
+  .lg\:delay-1000 {
+    transition-delay: 1000ms !important;
+  }
+
   .lg\:example {
     font-weight: 700;
     color: #f56565;
@@ -52188,6 +52316,38 @@ video {
     transition-duration: 1000ms !important;
   }
 
+  .xl\:delay-75 {
+    transition-delay: 75ms !important;
+  }
+
+  .xl\:delay-100 {
+    transition-delay: 100ms !important;
+  }
+
+  .xl\:delay-150 {
+    transition-delay: 150ms !important;
+  }
+
+  .xl\:delay-200 {
+    transition-delay: 200ms !important;
+  }
+
+  .xl\:delay-300 {
+    transition-delay: 300ms !important;
+  }
+
+  .xl\:delay-500 {
+    transition-delay: 500ms !important;
+  }
+
+  .xl\:delay-700 {
+    transition-delay: 700ms !important;
+  }
+
+  .xl\:delay-1000 {
+    transition-delay: 1000ms !important;
+  }
+
   .xl\:example {
     font-weight: 700;
     color: #f56565;

__tests__/fixtures/tailwind-output.css

@@ -10917,6 +10917,38 @@ video {
   transition-duration: 1000ms;
 }
 
+.delay-75 {
+  transition-delay: 75ms;
+}
+
+.delay-100 {
+  transition-delay: 100ms;
+}
+
+.delay-150 {
+  transition-delay: 150ms;
+}
+
+.delay-200 {
+  transition-delay: 200ms;
+}
+
+.delay-300 {
+  transition-delay: 300ms;
+}
+
+.delay-500 {
+  transition-delay: 500ms;
+}
+
+.delay-700 {
+  transition-delay: 700ms;
+}
+
+.delay-1000 {
+  transition-delay: 1000ms;
+}
+
 .example {
   font-weight: 700;
   color: #f56565;
@@ -21234,6 +21266,38 @@ video {
     transition-duration: 1000ms;
   }
 
+  .sm\:delay-75 {
+    transition-delay: 75ms;
+  }
+
+  .sm\:delay-100 {
+    transition-delay: 100ms;
+  }
+
+  .sm\:delay-150 {
+    transition-delay: 150ms;
+  }
+
+  .sm\:delay-200 {
+    transition-delay: 200ms;
+  }
+
+  .sm\:delay-300 {
+    transition-delay: 300ms;
+  }
+
+  .sm\:delay-500 {
+    transition-delay: 500ms;
+  }
+
+  .sm\:delay-700 {
+    transition-delay: 700ms;
+  }
+
+  .sm\:delay-1000 {
+    transition-delay: 1000ms;
+  }
+
   .sm\:example {
     font-weight: 700;
     color: #f56565;
@@ -31552,6 +31616,38 @@ video {
     transition-duration: 1000ms;
   }
 
+  .md\:delay-75 {
+    transition-delay: 75ms;
+  }
+
+  .md\:delay-100 {
+    transition-delay: 100ms;
+  }
+
+  .md\:delay-150 {
+    transition-delay: 150ms;
+  }
+
+  .md\:delay-200 {
+    transition-delay: 200ms;
+  }
+
+  .md\:delay-300 {
+    transition-delay: 300ms;
+  }
+
+  .md\:delay-500 {
+    transition-delay: 500ms;
+  }
+
+  .md\:delay-700 {
+    transition-delay: 700ms;
+  }
+
+  .md\:delay-1000 {
+    transition-delay: 1000ms;
+  }
+
   .md\:example {
     font-weight: 700;
     color: #f56565;
@@ -41870,6 +41966,38 @@ video {
     transition-duration: 1000ms;
   }
 
+  .lg\:delay-75 {
+    transition-delay: 75ms;
+  }
+
+  .lg\:delay-100 {
+    transition-delay: 100ms;
+  }
+
+  .lg\:delay-150 {
+    transition-delay: 150ms;
+  }
+
+  .lg\:delay-200 {
+    transition-delay: 200ms;
+  }
+
+  .lg\:delay-300 {
+    transition-delay: 300ms;
+  }
+
+  .lg\:delay-500 {
+    transition-delay: 500ms;
+  }
+
+  .lg\:delay-700 {
+    transition-delay: 700ms;
+  }
+
+  .lg\:delay-1000 {
+    transition-delay: 1000ms;
+  }
+
   .lg\:example {
     font-weight: 700;
     color: #f56565;
@@ -52188,6 +52316,38 @@ video {
     transition-duration: 1000ms;
   }
 
+  .xl\:delay-75 {
+    transition-delay: 75ms;
+  }
+
+  .xl\:delay-100 {
+    transition-delay: 100ms;
+  }
+
+  .xl\:delay-150 {
+    transition-delay: 150ms;
+  }
+
+  .xl\:delay-200 {
+    transition-delay: 200ms;
+  }
+
+  .xl\:delay-300 {
+    transition-delay: 300ms;
+  }
+
+  .xl\:delay-500 {
+    transition-delay: 500ms;
+  }
+
+  .xl\:delay-700 {
+    transition-delay: 700ms;
+  }
+
+  .xl\:delay-1000 {
+    transition-delay: 1000ms;
+  }
+
   .xl\:example {
     font-weight: 700;
     color: #f56565;