Just-in-Time: The Next Generation of Tailwind CSS
Tailwind CSS on GitHub


Utilities for controlling transform behaviour.

Default class reference

transform--tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
transform-gpu--tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
transform-nonetransform: none;


To enable transformations you have to add the transform utility.

<img class="transform rotate-45 ...">
<img class="transform skew-y-12 ...">
<img class="transform scale-50 ...">
<img class="transform translate-x-4 translate-y-4 ...">

Hardware acceleration

A lot of transformations can be executed on the GPU instead of the CPU. This enables better performance. You can use the transform-gpu utility to enable GPU Acceleration.

<div class="transform-gpu scale-150 ..."></div>


If you want to disable transformations, then you can use the transform-none utility.

<div class="transform rotate-45 lg:transform-none ..."></div>


To enable or disable transforms at a specific breakpoint, add a {screen}: prefix to any of the transform utilities. For example, use md:transform to apply the transform utility at only medium screen sizes and above.

<img class="transform sm:transform-gpu md:transform-none ...">

For more information about Tailwind's responsive design features, check out the Responsive Design documentation.


By default, only responsive variants are generated for transform utilities.

You can control which variants are generated for the transform utilities by modifying the transform 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: {
      extend: {
        // ...
+       transform: ['hover', 'focus'],


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

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