Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Transforms only work if applied after classes like rotate, translate

See original GitHub issue

tw.`rotate-90 transform` works as expected however, tw.`transform rotate-90` doesn’t work.

Seems anything set by transform isn’t overridden later, so since transform already sets --transform-rotate: 0, rotate-90 is not applied. Same goes for all scale,skew, translate classes. Also using rotate-90! does nothing. It all only works if the order is reversed. TailwindCSS makes all rules set by these secondary utils (rotate, skew, etc) as !important so they override.

Thank you for the amazing library btw 😄

Issue Analytics

State:
Created 3 years ago
Reactions:1
Comments:12 (6 by maintainers)

Top GitHub Comments

2reactions

n00b2pr0commented, Mar 31, 2020

Great! 1.0.0-alpha.8 works for me. 🎉

Thanks @ben-rogerson and @owaiswiz! 👏

2reactions

ben-rogersoncommented, Mar 30, 2020

This issue is solved! 🎉

We’ve reached closing time.

Top Results From Across the Web

transform - CSS: Cascading Style Sheets - MDN Web Docs

The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting ......

How They Fit Together: Transform, Translate, Rotate, Scale ...

So a rotation rotates the x and y axes. If you have a transform that rotates 45 degrees and then apply a translate...

transform

The transform property allows you to visually manipulate an element by skewing, rotating, translating, or scaling:

Finer grained control over CSS transforms with individual ...

Learn how you can use the individual translate, rotate, and scale CSS properties to approach transforms in an intuitive way.

CSS Transform Is Dead! Use This Instead - YouTube

... recently were the addition of the translate, rotate, and scale... ... need to use the transform property which is incredibly nice since...