Merge pull request #1462 from philippbosch/transition-delay

Add support for transition-delay

__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;

src/corePlugins.js

@@ -88,6 +88,7 @@ import skew from './plugins/skew'
 import transitionProperty from './plugins/transitionProperty'
 import transitionTimingFunction from './plugins/transitionTimingFunction'
 import transitionDuration from './plugins/transitionDuration'
+import transitionDelay from './plugins/transitionDelay'
 
 import configurePlugins from './util/configurePlugins'
 
@@ -183,5 +184,6 @@ export default function({ corePlugins: corePluginConfig }) {
     transitionProperty,
     transitionTimingFunction,
     transitionDuration,
+    transitionDelay,
   })
 }

src/plugins/transitionDelay.js

@@ -0,0 +1,5 @@
+import createUtilityPlugin from '../util/createUtilityPlugin'
+
+export default function() {
+  return createUtilityPlugin('transitionDelay', [['delay', ['transitionDelay']]])
+}

stubs/defaultConfig.stub.js

@@ -598,6 +598,16 @@ module.exports = {
       '700': '700ms',
       '1000': '1000ms',
     },
+    transitionDelay: {
+      '75': '75ms',
+      '100': '100ms',
+      '150': '150ms',
+      '200': '200ms',
+      '300': '300ms',
+      '500': '500ms',
+      '700': '700ms',
+      '1000': '1000ms',
+    },
   },
   variants: {
     accessibility: ['responsive', 'focus'],
@@ -688,6 +698,7 @@ module.exports = {
     transitionProperty: ['responsive'],
     transitionTimingFunction: ['responsive'],
     transitionDuration: ['responsive'],
+    transitionDelay: ['responsive'],
   },
   corePlugins: {},
   plugins: [],