search

ben-rogerson / twin.macro

🦹‍♂️ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, solid-styled-components, stitches and goober) at build time.
MIT License
7.92k stars 183 forks source link

Scale not working in twin.macro like it does in tailwind #723

Closed ayomtuase closed 2 years ago

ayomtuase commented 2 years ago

Scale utility classes are not working in Twin.macro like it does in regular Tailwind.

In Twin-macro, the resulting css from scale-75:

.scale-75 {
  --tw-scale-x: .75;
  --tw-scale-y: .75;
  transform: var(--tw-transform);
}

while in Tailwind the resulting css from scale-75:

.scale-75 {
    --tw-scale-x: .75;
    --tw-scale-y: .75;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

I am using emotion for the CSS-In-JS library

https://github.com/ayomtuase/react-typescript-taskify/blob/scale-twin-macro-issue/src/components/Styles.ts

ben-rogerson commented 2 years ago

There's a release candidate containing this feature and more from tailwind v3.

Install with:

npm i twin.macro@rc
ben-rogerson commented 2 years ago

Follow along in https://github.com/ben-rogerson/twin.macro/discussions/679