tailwind-syntax-3d-transforms
Installation
SKILL.md
Tailwind CSS Syntax: 3D Transforms (v4-only)
Tailwind v4 introduces a complete 3D transform system: perspective-* to establish depth, transform-3d to opt children into a 3D rendering context, rotate-x/y/z-* for axis-aware rotations, translate-z-* for Z-axis offsets, and backface-hidden / backface-visible for two-sided elements. ALL of these utilities are v4-ONLY ; using them in a Tailwind v3.4 project produces no CSS and the layout stays flat.
Quick Reference
The 3D transform stack
| Layer : utility : where it goes : default |
|---|
Depth : perspective-* : the PARENT of the 3D scene : perspective: none (no depth) |
Rendering context : transform-3d : the PARENT of the rotated elements : transform-style: flat (default) |
Rotation : rotate-x-*, rotate-y-*, rotate-z-* : the rotated element itself : 0 |
Z-axis offset : translate-z-*, -translate-z-* : the offset element itself : 0 |
Two-sided : backface-visible / backface-hidden : the element with a back face : visible |
Origin : perspective-origin-* : the parent that has perspective-* : center |