Using CSS Transforms with TailwindCSS v1.2

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

1<div class="origin-center transform scale-50 rotate-45 translate-x-full"></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!

1<div class="transform scale-50">Scaled down</div>
2<div>
3  <div class="inline-block transform rotate-45">Rotated</div>
4</div>
5<div class="transform translate-x-1/2">Translated</div>

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

1<div class="inline-block py-12">
2  <div class="inline-block p-2 text-white transition-transform duration-1000 ease-out transform rotate-45 bg-red-500 hover:-rotate-45">Hover me to rotate!</div>
3</div>
4<div class="inline-block ml-8 transition-transform duration-1000 ease-out transform hover:translate-x-1/2">Hover me to slide!</div>

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.

 1{
 2  center: 'center',
 3  top: 'top',
 4  'top-right': 'top right',
 5  right: 'right',
 6  'bottom-right': 'bottom right',
 7  bottom: 'bottom',
 8  'bottom-left': 'bottom left',
 9  left: 'left',
10  'top-left': 'top left',
11}

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

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

 1'0': '0',
 2'50': '.5',
 3'75': '.75',
 4'90': '.9',
 5'95': '.95',
 6'100': '1',
 7'105': '1.05',
 8'110': '1.1',
 9'125': '1.25',
10'150': '1.5',

rotate-*

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

1'-180': '-180deg',
2'-90': '-90deg',
3'-45': '-45deg',
4'0': '0',
5'45': '45deg',
6'90': '90deg',
7'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:

1{
2  ...theme('spacing'),
3  ...negative(theme('spacing')),
4  '-full': '-100%',
5  '-1/2': '-50%',
6  '1/2': '50%',
7  full: '100%',
8}

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.

Thanks for reading this article!

Hopefully you found this article useful! If you did, share it on Twitter!

Found an issue with the article? Submit your edits against the repository.