Transition Property v1.2.0+

Utilities for controlling which CSS properties transition.

Class reference

Class Properties
.transition-none transition-property: none;
.transition-all transition-property: all;
.transition transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
.transition-colors transition-property: background-color, border-color, color, fill, stroke;
.transition-opacity transition-property: opacity;
.transition-shadow transition-property: box-shadow;
.transition-transform transition-property: transform;


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

<button class="transition duration-500 ease-in-out bg-blue-500 hover:bg-red-500 transform hover:-translate-y-1 hover:scale-110 ...">
  Hover me


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.


Property values

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.

// tailwind.config.js
module.exports = {
theme: {
extend: {
transitionProperty: {
+       'height': 'height',
+       'spacing': 'margin, padding',

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

Responsive and pseudo-class variants

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 variants section of your tailwind.config.js file.

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

// tailwind.config.js
module.exports = {
variants: {
    // ...
-   transitionProperty: ['responsive'],
+   transitionProperty: ['responsive', 'hover', 'focus'],


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:

// tailwind.config.js
module.exports = {
corePlugins: {
    // ...
+   transitionProperty: false,