Transform

Transform

To enable transformations you have to add the transform utility.

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>

None

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

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

Responsive

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.

Variants

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'],
      }
    }
  }

Disabling

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