Tailwind CSS 1.2 (released in February 2020) has utilities for scale, rotate, translate, skew, and transform origin, and contrary to this plugin, they are fully composable (e.g. a single element can have more than one transform type). It doesn’t have 3D transforms (translateZ, translate3d, scaleZ, scale3d, rotateX, rotateY, rotate3d, perspective, transform-style, and backface-visibility) but those are not very common and can be added to projects manually on a case-by-case basis.
npm install tailwindcss-transforms// tailwind.config.js
module.exports = {
theme: {
transform: { // defaults to this value
'none': 'none',
},
transformOrigin: { // defaults to these values
't': 'top',
'tr': 'top right',
'r': 'right',
'br': 'bottom right',
'b': 'bottom',
'bl': 'bottom left',
'l': 'left',
'tl': 'top left',
},
translate: { // defaults to {}
'1/2': '50%',
'full': '100%',
'right-up': ['100%', '-100%'],
'3d': ['40px', '-60px', '-130px'],
},
scale: { // defaults to {}
'90': '0.9',
'100': '1',
'110': '1.1',
'-100': '-1',
'stretched-x': ['2', '0.5'],
'stretched-y': ['0.5', '2'],
'3d': ['0.5', '1', '2'],
},
rotate: { // defaults to {}
'90': '90deg',
'180': '180deg',
'270': '270deg',
'3d': ['0', '1', '0.5', '45deg'],
},
skew: { // defaults to {}
'-5': '-5deg',
'5': '5deg',
},
perspective: { // defaults to {}
'none': 'none',
'250': '250px',
'500': '500px',
'750': '750px',
'1000': '1000px',
},
perspectiveOrigin: { // defaults to these values
't': 'top',
'tr': 'top right',
'r': 'right',
'br': 'bottom right',
'b': 'bottom',
'bl': 'bottom left',
'l': 'left',
'tl': 'top left',
},
},
variants: { // all the following default to ['responsive']
transform: ['responsive'],
transformOrigin: ['responsive'],
translate: ['responsive'],
scale: ['responsive'],
rotate: ['responsive'],
skew: ['responsive'],
perspective: ['responsive'],
perspectiveOrigin: ['responsive'],
transformStyle: ['responsive'],
backfaceVisibility: ['responsive'],
transformBox: ['responsive'],
},
plugins: [
require('tailwindcss-transforms')({
'3d': false, // defaults to false
}),
],
};This plugin generates the following utilities:
/* configurable with the "transform" theme object */
.transform-none {
transform: none;
}
/* configurable with the "transformOrigin" theme object */
.transform-[key] {
transform-origin: [value];
}
/* configurable with the "translate" theme object */
.translate-x-[key] {
transform: translateX([value]);
}
.translate-y-[key] {
transform: translateY([value]);
}
.translate-z-[key] { /* only if the "3d" option is true */
transform: translateZ([value]);
}
/* when the key starts with a minus sign: */
.-translate-x-[key] {
transform: translateX([value]);
}
.-translate-y-[key] {
transform: translateY([value]);
}
.-translate-z-[key] { /* only if the "3d" option is true */
transform: translateZ([value]);
}
/* when the value is an array with two values: */
.translate-[key] {
transform: translate([value-1], [value-2]);
}
/* when the value is an array with three values: */
.translate-[key] {
transform: translate3d([value-1], [value-2], [value-3]);
}
/* configurable with the "scale" theme object */
.scale-[key] {
transform: scale([value]);
}
.scale-x-[key] {
transform: scaleX([value]);
}
.scale-y-[key] {
transform: scaleY([value]);
}
.scale-z-[key] { /* only if the "3d" option is true */
transform: scaleZ([value]);
}
/* when the key starts with a minus sign: */
.-scale-[key] {
transform: scale([value]);
}
.-scale-x-[key] {
transform: scaleX([value]);
}
.-scale-y-[key] {
transform: scaleY([value]);
}
.-scale-z-[key] { /* only if the "3d" option is true */
transform: scaleZ([value]);
}
/* when the value is an array with two values: */
.scale-[key] {
transform: scale([value-1], [value-2]);
}
/* when the value is an array with three values: */
.scale-[key] {
transform: scale3d([value-1], [value-2], [value-3]);
}
/* configurable with the "rotate" theme object */
.rotate-[key] {
transform: rotate([value]);
}
.rotate-x-[key] { /* only if the "3d" option is true */
transform: rotateX([value]);
}
.rotate-y-[key] { /* only if the "3d" option is true */
transform: rotateY([value]);
}
/* when the key starts with a minus sign: */
.-rotate-[key] {
transform: rotate([value]);
}
.-rotate-x-[key] { /* only if the "3d" option is true */
transform: rotateX([value]);
}
.-rotate-y-[key] { /* only if the "3d" option is true */
transform: rotateY([value]);
}
/* when the value is an array: */
.rotate-[key] {
transform: rotate3d([value-1], [value-2], [value-3], [value-4]);
}
/* configurable with the "skew" theme object */
.skew-x-[key] {
transform: skewX([value]);
}
.skew-y-[key] {
transform: skewY([value]);
}
/* when the key starts with a minus sign: */
.-skew-x-[key] {
transform: skewX([value]);
}
.-skew-y-[key] {
transform: skewY([value]);
}
/* configurable with the "perspective" theme object (only if the "3d" option is true) */
.perspective-[key] {
perspective: [value]
}
/* configurable with the "perspectiveOrigin" theme object (only if the "3d" option is true) */
.perspective-[key] {
perspective-origin: [value]
}
/* generated when the "3d" option is set to true */
.transform-flat {
transform-style: flat;
}
.transform-preserve-3d {
transform-style: preserve-3d;
}
.backface-visible {
backface-visibility: visible;
}
.backface-hidden {
backface-visibility: hidden;
}
/* not configurable (except for variants) */
.transform-border {
transform-box: border-box;
}
.transform-fill {
transform-box: fill-box;
}
.transform-view {
transform-box: view-box;
}