Transition Property

    v1.2.0+

    Utilities for controlling which CSS properties transition.

    Use the utilities to specify which properties should transition when they change.

    1. <button class="transition transform hover:-translate-y-1 motion-reduce:transition-none motion-reduce:transform-none ...">
    2. </button>

    These variants are not enabled by default, but you can enable them in the variants section of your tailwind.config.js file:

    Learn more in the variants documentation.

    To change which properties of an element transition at a specific breakpoint, add a {screen}: prefix to any existing transition-property utility. For example, use md:transition-colors to apply the transition-colors utility at only medium screen sizes and above.

    For more information about Tailwind’s responsive design features, check out the documentation.

    2.   module.exports = {
    3.     theme: {
    4.       extend: {
    5.         transitionProperty: {
    6. +         'height': 'height',
    7. +         'spacing': 'margin, padding',
    8.         }
    9.     }
    10.   }

    Learn more about customizing the default theme in the theme customization documentation.

    By default, only responsive variants are generated for transition-property utilities.

    You can control which variants are generated for the transition-property utilities by modifying the transitionProperty property in the section of your tailwind.config.js file.

    For example, this config will also generate hover and focus variants:

    1.   // tailwind.config.js
    2.   module.exports = {
    3.     corePlugins: {
    4.       // ...
    5. +     transitionProperty: false,
    6.     }
    7.   }

      Transition Duration →