Transition Property

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

    You can conditionally apply animations and transitions using the motion-safe and motion-reduce variants:

    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:

    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 Responsive Design documentation.

    By default, Tailwind provides transition-property utilities for seven common property combinations. You change, add, or remove these by customizing the transitionProperty section of your Tailwind theme config.

    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 .

    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:

    If you don’t plan to use the transition-property utilities in your project, you can disable them entirely by setting the transitionProperty property to false in the corePlugins section of your config file:

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

    ←Table Layout