- Instant help with your CSS coding problems

Rotate element with TailwindCSS

by Mike
Question:
How to rotate element with TailwindCSS?
Answer:
<div class="w-40 h-10 bg-sky-100 hover:rotate-6">Rotate on hover</div>
Description:

You can rotate an element with TailwindCSS using the rotate-{degree} utility class. You can use the predefined values or any custom value with arbitrary values.

To create a nice rollover rotation with a small animation you can use the following code:

<div class="flex">
    <div class="w-40 h-10 bg-sky-100 m-2 hover:rotate-[-6deg] transition-all duration-500">Item 1</div>
    <div class="w-40 h-10 bg-sky-100 m-2 hover:rotate-[-6deg] transition-all duration-500">Item 2</div>
</div>

Where the result is:

Rotate element with TailwindCSS

Reference:
TailwindCSS rotate reference
Share "How to rotate element with TailwindCSS?"
Related snippets:
Tags:
rotate, element, 90, 45 degrees, tailwind
Technical term:
Rotate element with TailwindCSS
Trending articles
Use clip path in TailwindCSSSet focus border in TailwindCSSCreate hover underline animation in TailwindCSSTruncate text in TailwindCSSCreate triangles with TailwindCSSCreate custom toggle button with TailwindCSSImplement Dark mode with TailwindCSSHow to create custom checkboxes in TailwindCSSFix the Unknown at rule @tailwind warning in VSCodeFix TailwindCSS breaks existing styles
Trending snippets
Remove focus border around input elementCreate endless rotation animation in CSSAdd a box shadow to only one side of an elementCenter an absolute element in TailwindCSSAdd dots if text is too longAdd class to child when hovering on parent in TailwindCSSAdd text shadow with Tailwind CSSForce line break in a long word using CSSSelect the nth child in TailwindCSSAccess child elements in TailwindCSSCreate a neon effect with TailwindCSSHow to use !important in TailwindCSSChange bullet size in HTMLHow to use CSS variables in TailwindCSSWrite vertical text in HTMLSet line spacing in CSSSelect first child in TailwindCSSDisable text selection with CSSHow to use calc() in TailwindCSSSet custom cursor in CSS
Network articles
Fix the ReactDOM.render is no longer supported in React 18How to run useEffect only once in ReactCheck if an array contains a valueExtract a substring from a string in PHPFix the React 18: Hydration failed because the initial UI does not match errorUse IF statement in MySQLToggle word wrap in VS CodeAccess JavaScript object property with spaceCheck if string contains a specific character using JavaScriptConvert string to character array in JavaScriptGenerate UUID in JavaScriptPlay video in fullscreen with vanilla JavaScriptconvert number to string in JavaScriptCompare two files in VS CodeGet same day in the next week in PHHPBackup MySQL schema onlyGenerate random string with PHPSet X-Content-Type-Options in ApacheGet the first Monday of a month in JavaSplit a string into words
Interesting things
OpanAi's ChatGPT