How to Rotate an Element in Tailwind CSS

Updated: June 9, 2022 By: Pennywise Post a comment

In Tailwind CSS, you can rotate an element by using rotate-{value} utility classes. At the time of writing, there are nine preset utility classes:

rotate-0
rotate-1

rotate-2
rotate-3
rotate-6

rotate-12
rotate-45
rotate-90

rotate-180

However, you can rotate an element to an arbitrary angle by enclosing your value in square brackets, like this:

<div class="rotate-[35deg]"></div>

To remove the rotation, you can use the transform-none class. For more clarity, see the example below.

Example

This example rotates some elements, including boxes, text, and an image. When you hover an element, its rotation will go away.

Preview:

The code:

<body class="flex flex-wrap space-x-10 spacey-5 p-20 bg-green-200">
    <div class="rotate-45 w-48 h-32 bg-amber-600 hover:transform-none"></div>
    <img class="rotate-12 w-72 object-cover drop-shadow-md hover:transform-none"
        src="https://www.kindacode.com/wp-content/uploads/2022/06/cute-dog.jpeg" />
    
    <h3 class="rotate-6 text-4xl hover:transform-none">Hello There</h3>

    <div class="rotate-[13deg] m-10 p-20 bg-purple-700 hover:transform-none">
        <h1 class="rotate-[39deg] text-4xl text-white italic hover:transofrm-none">KindaCode.com</h1>
    </div>
</body>

The cute dog image in the example above is from Pixabay, used under Pixabay’s license.

Further reading: