Merge pull request #1273 from tailwindcss/transition-utilities

Add transition utilities

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

__tests__/fixtures/tailwind-output.css

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

src/corePlugins.js

@@ -69,12 +69,6 @@ import whitespace from './plugins/whitespace'
 import wordBreak from './plugins/wordBreak'
 import width from './plugins/width'
 import zIndex from './plugins/zIndex'
-import transform from './plugins/transform'
-import transformOrigin from './plugins/transformOrigin'
-import scale from './plugins/scale'
-import rotate from './plugins/rotate'
-import translate from './plugins/translate'
-import skew from './plugins/skew'
 import gap from './plugins/gap'
 import columnGap from './plugins/columnGap'
 import rowGap from './plugins/rowGap'
@@ -87,6 +81,15 @@ import gridTemplateRows from './plugins/gridTemplateRows'
 import gridRow from './plugins/gridRow'
 import gridRowStart from './plugins/gridRowStart'
 import gridRowEnd from './plugins/gridRowEnd'
+import transform from './plugins/transform'
+import transformOrigin from './plugins/transformOrigin'
+import scale from './plugins/scale'
+import rotate from './plugins/rotate'
+import translate from './plugins/translate'
+import skew from './plugins/skew'
+import transitionProperty from './plugins/transitionProperty'
+import transitionTimingFunction from './plugins/transitionTimingFunction'
+import transitionDuration from './plugins/transitionDuration'
 
 import configurePlugins from './util/configurePlugins'
 
@@ -181,5 +184,8 @@ export default function({ corePlugins: corePluginConfig }) {
     rotate,
     translate,
     skew,
+    transitionProperty,
+    transitionTimingFunction,
+    transitionDuration,
   })
 }

src/plugins/transitionDuration.js

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

src/plugins/transitionProperty.js

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

src/plugins/transitionTimingFunction.js

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

stubs/defaultConfig.stub.js

@@ -525,6 +525,30 @@ module.exports = {
       full: '100%',
     }),
     skew: {},
+    transitionProperty: {
+      none: 'none',
+      all: 'all',
+      default: 'background-color, border-color, color, opacity, transform',
+      colors: 'background-color, border-color, color',
+      opacity: 'opacity',
+      transform: 'transform',
+    },
+    transitionTimingFunction: {
+      linear: 'linear',
+      in: 'cubic-bezier(0.4, 0, 1, 1)',
+      out: 'cubic-bezier(0, 0, 0.2, 1)',
+      'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
+    },
+    transitionDuration: {
+      '75': '75ms',
+      '100': '100ms',
+      '150': '150ms',
+      '200': '200ms',
+      '300': '300ms',
+      '500': '500ms',
+      '700': '700ms',
+      '1000': '1000ms',
+    },
   },
   variants: {
     accessibility: ['responsive', 'focus'],
@@ -614,6 +638,10 @@ module.exports = {
     rotate: ['responsive', 'hover', 'focus'],
     translate: ['responsive', 'hover', 'focus'],
     skew: ['responsive', 'hover', 'focus'],
+    transitionProperty: ['responsive'],
+    transitionTimingFunction: ['responsive'],
+    transitionDuration: ['responsive'],
+    transitionDelay: ['responsive'],
   },
   corePlugins: {},
   plugins: [],