Tailwind CSS
/Beginner
Scale & Rotate
Definition
Specific transform utilities used to enlarge/shrink an element (`scale`) or spin it around its center point (`rotate`).
Explain Like I'm New
- `scale-110` makes it 10% larger. - `scale-90` makes it 10% smaller. - `rotate-45` tilts it exactly 45 degrees clockwise.
Real World Example
Creating an accordion chevron icon `<svg>` that rotates 180 degrees (`rotate-180`) to point downwards when the accordion is opened.
Common Use Cases
- •Interactive icons
- •Image zoom effects
- •Card hover states
Interactive Example
Interview Questions
basic
- What Tailwind class makes an element grow exactly twice its original size?
intermediate
- If you scale an element up to `scale-150`, does it push the elements next to it away to make room?