CSS Transitions

__tests__/fixtures/tailwind-output.css

@@ -4301,6 +4301,98 @@ button,
   letter-spacing: .05em;
 }
 
+.trans {
+  transition-duration: .25s;
+}
+
+.trans-slower {
+  transition-duration: .75s;
+}
+
+.trans-slow {
+  transition-duration: .5s;
+}
+
+.trans-fast {
+  transition-duration: .15s;
+}
+
+.trans-faster {
+  transition-duration: .075s;
+}
+
+.trans {
+  transition-property: all;
+}
+
+.trans-all {
+  transition-property: all;
+}
+
+.trans-none {
+  transition-property: none;
+}
+
+.trans-bg {
+  transition-property: background;
+}
+
+.trans-opacity {
+  transition-property: opacity;
+}
+
+.trans-color {
+  transition-property: color;
+}
+
+.trans-shadow {
+  transition-property: box-shadow;
+}
+
+.trans {
+  transition-timing-function: ease-in-out;
+}
+
+.trans-linear {
+  transition-timing-function: linear;
+}
+
+.trans-ease {
+  transition-timing-function: ease;
+}
+
+.trans-ease-in {
+  transition-timing-function: ease-in;
+}
+
+.trans-ease-out {
+  transition-timing-function: ease-out;
+}
+
+.trans-ease-in-out {
+  transition-timing-function: ease-in-out;
+}
+
+.trans-delay {
+  transition-delay: .1s;
+}
+
+.trans-delay-long {
+  transition-delay: .2s;
+}
+
+.trans-delay-longer {
+  transition-delay: .3s;
+}
+
+.trans-delay-longest {
+  transition-delay: .4s;
+}
+
+.trans-delay-none {
+  transition-delay: 0s;
+}
+
 .select-none {
   user-select: none;
 }

defaultConfig.stub.js

@@ -795,6 +795,87 @@ module.exports = {
     'current': 'currentColor',
   },
 
+  /*
+  |-----------------------------------------------------------------------------
+  | Transition duration         https://tailwindcss.com/docs/transition-duration
+  |-----------------------------------------------------------------------------
+  |
+  | Here is where you define your CSS transition timings. By default we provide
+  | a handful of basic speeds.
+  |
+  | Class name: .trans-{name}
+  |
+  */
+
+  transitionDuration: {
+    default: '.25s',
+    'slower': '.75s',
+    'slow': '.5s',
+    'fast': '.15s',
+    'faster': '.075s',
+  },
+
+  /*
+  |-----------------------------------------------------------------------------
+  | Transition property         https://tailwindcss.com/docs/transition-property
+  |-----------------------------------------------------------------------------
+  |
+  | Here is where you define the CSS properties that you would like to be able
+  | to transition. Sane defaults are provided as a starting point.
+  |
+  | Class name: .trans-{name}
+  |
+  */
+
+  transitionProperty: {
+    default: 'all',
+    'all': 'all',
+    'none': 'none',
+    'bg': 'background',
+    'opacity': 'opacity',
+    'color': 'color',
+    'shadow': 'box-shadow',
+  },
+
+  /*
+  |-----------------------------------------------------------------------------
+  | Transition timing function    https://tailwindcss.com/docs/transition-timing
+  |-----------------------------------------------------------------------------
+  |
+  | Here is where you define the timing functions you would like to use in your
+  | CSS transitions.
+  |
+  | Class name: .trans-{name}
+  |
+  */
+
+  transitionTimingFunction: {
+    default: 'ease-in-out',
+    'linear': 'linear',
+    'ease': 'ease',
+    'ease-in': 'ease-in',
+    'ease-out': 'ease-out',
+    'ease-in-out': 'ease-in-out',
+  },
+
+  /*
+  |-----------------------------------------------------------------------------
+  | Transition delay               https://tailwindcss.com/docs/transition-delay
+  |-----------------------------------------------------------------------------
+  |
+  | Here is where you define your transition delay lengths.
+  |
+  | Class name: .trans-delay-{name}
+  |
+  */
+
+  transitionDelay: {
+    default: '.1s',
+    'long': '.2s',
+    'longer': '.3s',
+    'longest': '.4s',
+    'none': '0s',
+  },
 
   /*
   |-----------------------------------------------------------------------------
@@ -850,6 +931,10 @@ module.exports = {
     textSizes: ['responsive'],
     textStyle: ['responsive', 'hover'],
     tracking: ['responsive'],
+    transitionDuration: [],
+    transitionProperty: [],
+    transitionTimingFunction: [],
+    transitionDelay: [],
     userSelect: ['responsive'],
     verticalAlign: ['responsive'],
     visibility: ['responsive'],

src/generators/transitionDelay.js

@@ -0,0 +1,10 @@
+import _ from 'lodash'
+import defineClass from '../util/defineClass'
+
+export default function({ transitionDelay }) {
+  return _.map(transitionDelay, (delay, modifier) => {
+    return defineClass(modifier === 'default' ? 'trans-delay' : `trans-delay-${modifier}`, {
+      'transition-delay': delay,
+    })
+  })
+}

src/generators/transitionDuration.js

@@ -0,0 +1,10 @@
+import _ from 'lodash'
+import defineClass from '../util/defineClass'
+
+export default function({ transitionDuration }) {
+  return _.map(transitionDuration, (duration, modifier) => {
+    return defineClass(modifier === 'default' ? 'trans' : `trans-${modifier}`, {
+      'transition-duration': duration,
+    })
+  })
+}

src/generators/transitionProperty.js

@@ -0,0 +1,10 @@
+import _ from 'lodash'
+import defineClass from '../util/defineClass'
+
+export default function({ transitionProperty }) {
+  return _.map(transitionProperty, (propery, modifier) => {
+    return defineClass(modifier === 'default' ? 'trans' : `trans-${modifier}`, {
+      'transition-property': propery,
+    })
+  })
+}

src/generators/transitionTimingFunction.js

@@ -0,0 +1,10 @@
+import _ from 'lodash'
+import defineClass from '../util/defineClass'
+
+export default function({ transitionTimingFunction }) {
+  return _.map(transitionTimingFunction, (func, modifier) => {
+    return defineClass(modifier === 'default' ? 'trans' : `trans-${modifier}`, {
+      'transition-timing-function': func,
+    })
+  })
+}

src/utilityModules.js

@@ -37,6 +37,10 @@ import textColors from './generators/textColors'
 import textSizes from './generators/textSizes'
 import textStyle from './generators/textStyle'
 import tracking from './generators/tracking'
+import transitionDuration from './generators/transitionDuration'
+import transitionProperty from './generators/transitionProperty'
+import transitionTimingFunction from './generators/transitionTimingFunction'
+import transitionDelay from './generators/transitionDelay'
 import userSelect from './generators/userSelect'
 import verticalAlign from './generators/verticalAlign'
 import visibility from './generators/visibility'
@@ -84,6 +88,10 @@ export default [
   { name: 'textSizes', generator: textSizes },
   { name: 'textStyle', generator: textStyle },
   { name: 'tracking', generator: tracking },
+  { name: 'transitionDuration', generator: transitionDuration },
+  { name: 'transitionProperty', generator: transitionProperty },
+  { name: 'transitionTimingFunction', generator: transitionTimingFunction },
+  { name: 'transitionDelay', generator: transitionDelay },
   { name: 'userSelect', generator: userSelect },
   { name: 'verticalAlign', generator: verticalAlign },
   { name: 'visibility', generator: visibility },