Published under TailwindCSS.
You can now use CSS transforms right out of the box with TailwindCSS v1.2.
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!
You can even combine these with CSS transitions (read more about that here):
Alright, so let's get into what properties are available by default with Tailwind.
You can use this property to set the origin of the transformation.
As expected, these will scale your element either horizontally, vertically, or both. Default scale values:
This will apply the rotate transformation. Default rotate values are:
Note, that to apply the negative values, you need to prefix the "rotate" with a hyphen, just like negative margin, etc:
This will apply translate transformations to your element. Here are the default values:
The default values pull in all the spacing configuration values (used for margin, padding, etc).
This will apply a skew transformation on your element. Note that there are no default skew values provided.
Subscribe to my newsletter to know when I publish more content in the future.