Question about skew(x, y)

[Wulgaren]

Hello! I was wondering how would you translate this CSS line into tailwind classes?

transform: skew(50deg, -20deg);

As far as I know doing skew-x then skew-y results in a different outcome.

[alex-krasikau]

Hello @Wulgaren!

Tailwind CSS doesn't support translate-z, so implementing it with built-in utilities isn't possible. You have a few options:

1. 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.

2. For multiple uses in a component-based framework, you can still use arbitrary syntax and abstract it with a separate component.

<MyTransform className="p-8 bg-red-300">...</MyTransform>

3. If you're not using frameworks, using a few CSS custom classes is totally fine:

.my-transform {
  transform: skew(50deg, -20deg) scaleY(0.66667) translate3d(0, 0, 1px);
}

4. If you want to rely solely on utility Tailwind syntax, you can use a custom transform3d Tailwind plugin, which rebuilds the default transform implementation and offers a richer transform API, including translate-z.

class="skew-x-[50deg] skew-y-[-20deg] scale-y-[0.6667] translate-z-px"

[Wulgaren]

oh sorry i probably should've removed the translate3d, i'll update the question.

my question was more about skew(x, y) because as far as i know doing skew-x then skew-y results in a different outcome.

i wasn't sure if theres a way to make it work in tailwind (through some converting of the values so the result is the same maybe?). but i didn't know about that arbitrary syntax, thank you very much!

[alex-krasikau]

As soon as Tailwind CSS doesn't support individual skew, but skew-x and skew-y. Your options remain the same: use an arbitrary syntax or create a custom CSS class.