Question about skew(x, y) #13589
-
Hello! I was wondering how would you translate this CSS line into tailwind classes?
As far as I know doing skew-x then skew-y results in a different outcome. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 2 replies
-
Hello @Wulgaren! Tailwind CSS doesn't support
<MyTransform className="p-8 bg-red-300">...</MyTransform>
.my-transform {
transform: skew(50deg, -20deg) scaleY(0.66667) translate3d(0, 0, 1px);
}
class="skew-x-[50deg] skew-y-[-20deg] scale-y-[0.6667] translate-z-px" |
Beta Was this translation helpful? Give feedback.
Hello @Wulgaren!
Tailwind CSS doesn't support
translate-z
, so implementing it with built-in utilities isn't possible. You have a few options:Use arbitrary transform syntax and pass the whole declaration like this:
class="[transform:skew(50deg,-20deg)_scaleY(0.66667)_translate3d(0,0,1px)]"
. This is how I would implement it in my app for one or two use cases.For multiple uses in a component-based framework, you can still use arbitrary syntax and abstract it with a separate component.