Tailwind CSS Classes

Tailwind CSS class .transform / .transform-none

<div class="bg-gray-300 p-4 m-2 inline-flex justify-center">
  <div class="transform rotate-45 bg-teal-400 w-12 h-12"></div>
</div>

<div class="bg-gray-300 p-4 m-2 inline-flex justify-center">
  <div class="transform-none rotate-45 bg-teal-400 w-12 h-12"></div>
</div>

Preview

Are you tired of writing HTML by hand?

CSS source

.transform {
    --transform-translate-x: 0;
    --transform-translate-y: 0;
    --transform-rotate: 0;
    --transform-skew-x: 0;
    --transform-skew-y: 0;
    --transform-scale-x: 1;
    --transform-scale-y: 1;
    transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y))
}
.transform-none {
    transform: none;
}

More Tailwind CSS classes in Transform category

© 2024 Shuffle. All rights reserved.