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.

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.

---

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

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

---

rotate-*

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:

-rotate-45

---

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

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).

---

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!

Did you find this post useful? Let me know on Twitter! If you found an issue with the content, submit a pull request!

Subscribe to my newsletter to know when I publish more content in the future.

❤️ Likes: 0
📣 Retweets: 0
💬 Replies: 0
🙊 Mentions: 0