CSS Transitions

__tests__/fixtures/tailwind-output.css

@@ -4301,6 +4301,78 @@ 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;
+}
+
 .select-none {
   user-select: none;
 }

defaultConfig.stub.js

@@ -795,6 +795,69 @@ 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: .transition-{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: .transition-{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: .transition-{name}
+  |
+  */
+
+  transitionTimingFunction: {
+    default: 'ease-in-out',
+    'linear': 'linear',
+    'ease': 'ease',
+    'ease-in': 'ease-in',
+    'ease-out': 'ease-out',
+    'ease-in-out': 'ease-in-out',
+  },
+
 
   /*
   |-----------------------------------------------------------------------------
@@ -850,6 +913,9 @@ module.exports = {
     textSizes: ['responsive'],
     textStyle: ['responsive', 'hover'],
     tracking: ['responsive'],
+    transitionDuration: [],
+    transitionProperty: [],
+    transitionTimingFunction: [],
     userSelect: ['responsive'],
     verticalAlign: ['responsive'],
     visibility: ['responsive'],

docs/navigation.php

@@ -75,6 +75,11 @@
             'Style & Decoration' => 'text-style',
             'Whitespace & Wrapping' => 'whitespace-and-wrapping',
         ],
+        'Transitions' => [
+            'Duration' => 'transition-duration',
+            'Properties' => 'transition-property',
+            'Timing' => 'transition-timing',
+        ],
         'Vertical Alignment' => 'vertical-alignment',
         'Visibility' => 'visibility',
         'Z-Index' => 'z-index',

docs/source/_partials/variants-and-disabling.blade.php

@@ -1,10 +1,10 @@
 @php
-    $whichVariants = "only $variants[0]";
+    $whichVariants = count($variants) ? "only $variants[0]" : 'no';
     for ($i = 1; $i < count($variants); $i++) {
         $whichVariants .= (($i == count($variants) - 1) ? ' and ' : ', ') . $variants[$i];
     }
 
-    $currentVariants = '\'' . collect($variants)->implode('\', \'') . '\'';
+    $currentVariants = count($variants) ? '\'' . collect($variants)->implode('\', \'') . '\'' : '';
 
     $extraVariants = collect([
         'responsive',

docs/source/docs/transition-duration.blade.md

@@ -0,0 +1,52 @@
+---
+extends: _layouts.documentation
+title: "Transition Duration"
+description: "Utilities for controlling the duration of CSS transitions."
+features:
+  responsive: false
+  customizable: true
+  hover: false
+  focus: false
+---
+
+@include('_partials.work-in-progress')
+
+@include('_partials.class-table', [
+  'rows' => [
+    [
+      '.trans',
+      'transition-duration: .25s;',
+      "Set the transition duration to 0.25 seconds.",
+    ],
+    [
+      '.trans-slow',
+      'transition-duration: .5s;',
+      "Set the transition duration to 0.5 seconds.",
+    ],
+    [
+      '.trans-slower',
+      'transition-duration: .75s;',
+      "Set the transition duration to 0.75 seconds.",
+    ],
+    [
+      '.trans-fast',
+      'transition-duration: .15s;',
+      "Set the transition duration to 0.15 seconds.",
+    ],
+    [
+      '.trans-faster',
+      'transition-duration: .075s;',
+      "Set the transition duration to 0.075 seconds.",
+    ],
+  ]
+])
+
+## Customizing
+
+@include('_partials.variants-and-disabling', [
+    'utility' => [
+        'name' => 'transition duration',
+        'property' => 'transitionDuration',
+    ],
+    'variants' => [],
+])

docs/source/docs/transition-property.blade.md

@@ -0,0 +1,57 @@
+---
+extends: _layouts.documentation
+title: "Transition Property"
+description: "Utilities for controlling the properties that are transitioned in CSS transitions."
+features:
+  responsive: false
+  customizable: true
+  hover: false
+  focus: false
+---
+
+@include('_partials.work-in-progress')
+
+@include('_partials.class-table', [
+  'rows' => [
+    [
+      '.trans',
+      'transition-property: all;',
+      "Transition all properties.",
+    ],
+    [
+      '.trans-none',
+      'transition-property: none;',
+      "Transition no properties.",
+    ],
+    [
+      '.trans-bg',
+      'transition-property: background;',
+      "Transition the element's background.",
+    ],
+    [
+      '.trans-opacity',
+      'transition-property: opacity;',
+      "Transition the element's opacity.",
+    ],
+    [
+      '.trans-color',
+      'transition-property: color;',
+      "Transition the element's color.",
+    ],
+    [
+      '.trans-shadow',
+      'transition-property: box-shadow;',
+      "Transition the element's box shadow.",
+    ],
+  ]
+])
+
+## Customizing
+
+@include('_partials.variants-and-disabling', [
+    'utility' => [
+        'name' => 'transition property',
+        'property' => 'transitionProperty',
+    ],
+    'variants' => [],
+])

docs/source/docs/transition-timing.blade.md

@@ -0,0 +1,57 @@
+---
+extends: _layouts.documentation
+title: "Transition Timing"
+description: "Utilities for controlling the timing of CSS transitions."
+features:
+  responsive: false
+  customizable: true
+  hover: false
+  focus: false
+---
+
+@include('_partials.work-in-progress')
+
+@include('_partials.class-table', [
+  'rows' => [
+    [
+      '.trans',
+      'transition-timing-function: ease-in-out;',
+      "Use the 'ease-in-out' timing function for transitions.",
+    ],
+    [
+      '.trans-linear',
+      'transition-timing-function: linear;',
+      "Use the 'linear' timing function for transitions.",
+    ],
+    [
+      '.trans-ease',
+      'transition-timing-function: ease;',
+      "Use the 'ease' timing function for transitions.",
+    ],
+    [
+      '.trans-ease-in',
+      'transition-timing-function: ease-in;',
+      "Use the 'ease-in' timing function for transitions.",
+    ],
+    [
+      '.trans-ease-out',
+      'transition-timing-function: ease-out;',
+      "Use the 'ease-out' timing function for transitions.",
+    ],
+    [
+      '.trans-ease-in-out',
+      'transition-timing-function: ease-in-out;',
+      "Use the 'ease-in-out' timing function for transitions.",
+    ],
+  ]
+])
+
+## Customizing
+
+@include('_partials.variants-and-disabling', [
+    'utility' => [
+        'name' => 'transition timing',
+        'property' => 'transitionTimingFunction',
+    ],
+    'variants' => [],
+])

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,
+    })
+  })
+}