Using CSS transforms with TailwindCSS v1.2

5ec33e4cacef8.html

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

5ec33e4cacefa.html

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

5ec33e4cacefb.html

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

5ec33e4cacefc.json

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

5ec33e4cacefd.json

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

5ec33e4cacefe.json

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

5ec33e4caceff.json

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