Tailwind CSS Rotate

The rotate class in Tailwind CSS is used to apply rotation transformations to an element. It allows you to rotate an element clockwise or anti-clockwise by a specified degree value.

Syntax

<div class="rotate-{angle}"></div>

• {angle}: The degree value (0 - 360) for the rotation. This is required.

Example

<div class="w-48 h-48 bg-blue-500 rotate-45"></div>

This will create a 48x48 blue-colored square that is rotated 45 degrees clockwise.

Output

Explanation

The rotate class in Tailwind CSS applies a transform: rotate() CSS property to an element. You can specify the degree value (0 - 360) inside the curly braces to rotate the element by that amount.

In the example above, we have applied the rotate-45 class to a div element. This will rotate the element by 45 degrees clockwise.

You can also use negative values to rotate the element anti-clockwise. For example, rotate--45 will rotate the element by 45 degrees anti-clockwise.

Use

You can use the rotate class in Tailwind CSS to rotate elements to a different position on the screen. This can be useful for creating unique designs and layouts.

Important Points

• The rotate class requires a degree value (0 - 360) as a suffix.
• You can use positive values to rotate the element clockwise or negative values to rotate the element anti-clockwise.
• You can apply the rotate class to any HTML element.

Summary

The rotate class in Tailwind CSS is used for applying rotation transformations to an element. It allows you to rotate an element clockwise or anti-clockwise by a specified degree value. You can use this class to design unique layouts and animations in your web project.