Transform
Utilities for controlling transform behaviour.
Default class reference
Class | Properties |
---|---|
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-none | transform: none; |
Transform
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>
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,
}
}