Using CSS transforms with TailwindCSS v1.2

Published under TailwindCSS

You can now use CSS transforms right out of the box with TailwindCSS v1.2.

<div class="transform scale-50 rotate-45 translate-x-full origin-center"></div>

With the above example, the div will be scaled 150%, rotated 45 degrees, translated to the right 100% of the width, and all transformations will be based around the center of the element.

Check these out, all default Tailwind utilities!

Example

Scaled down
Rotated
Translated

You can even combine these with CSS transitions (read more about that here):

Example

Hover me to rotate!
Hover me to slide!

Alright, so let's get into what properties are available by default with Tailwind.

origin-*

You can use this property to set the origin of the transformation.

center: 'center',
top: 'top',
'top-right': 'top right',
right: 'right',
'bottom-right': 'bottom right',
bottom: 'bottom',
'bottom-left': 'bottom left',
left: 'left',
'top-left': 'top left',

---

scale-*, scale-x-*, scale-y-*

As expected, these will scale your element either horizontally, vertically, or both. Default scale values:

'0': '0',
'50': '.5',
'75': '.75',
'90': '.9',
'95': '.95',
'100': '1',
'105': '1.05',
'110': '1.1',
'125': '1.25',
'150': '1.5',

---

rotate-*

This will apply the rotate transformation. Default rotate values are:

'-180': '-180deg',
'-90': '-90deg',
'-45': '-45deg',
'0': '0',
'45': '45deg',
'90': '90deg',
'180': '180deg',

Note, that to apply the negative values, you need to prefix the "rotate" with a hyphen, just like negative margin, etc:

-rotate-45

---

translate-*, translate-x-*, translate-y-*

This will apply translate transformations to your element. Here are the default values:

...theme('spacing'),
...negative(theme('spacing')),
'-full': '-100%',
'-1/2': '-50%',
'1/2': '50%',
full: '100%',

The default values pull in all the spacing configuration values (used for margin, padding, etc).

---

skew-x-*, skew-y-*

This will apply a skew transformation on your element. Note that there are no default skew values provided.