Tailwind v3 updates

[ben-rogerson]

We're currently testing the next major version of twin which syncs with tailwindcss v3

Help test the next release:

npm install twin.macro@rc

🔥 Bugs / Issue discussion →

[prabhaw]

waiting for the update.

[gr-qft]

This is an awesome news! I'm using tailwind with stitches and can't wait for this. Thanks @ben-rogerson !

[aroc]

Just leaving a message to tell you Twin is extremely great and has made me love Tailwind even for larger projects, where Tailwind normally gets unwieldily. Thank you so much for your hard work on this, excited for Tailwind 3.0 support!

[RohitM-IN]

Thanks cant wait to add new features to my site :)

[MarioSerano]

Damn haha, excited for the integrations with the latest tailwindcss update! Y'all are amazing bunch 😄

[RangerCoder99]

Take all the time you need, and sorry about that crazy changelog, Thanks for all your hard work on this!

[crock]

Waiting on this update. Will it resolve this issue?

ModuleBuildError: Module build failed (from ./node_modules/gatsby/dist/utils/babel-loader.
js):
TypeError: /Users/USER/Code/GitHub/SITE/src/layouts/Layout.tsx: twin.macro: Cannot read properties of undefined (reading '700') Learn more: https://www.npmjs.com/package/twin.macro

[crock]

Waiting on this update. Will it resolve this issue?

ModuleBuildError: Module build failed (from ./node_modules/gatsby/dist/utils/babel-loader.
js):
TypeError: /Users/USER/Code/GitHub/SITE/src/layouts/Layout.tsx: twin.macro: Cannot read properties of undefined (reading '700') Learn more: https://www.npmjs.com/package/twin.macro

Disregard this reply. It worked as normal as soon as I updated postcss and autoprefixer.

[bumi001]

Waiting on this update. Will it resolve this issue?

ModuleBuildError: Module build failed (from ./node_modules/gatsby/dist/utils/babel-loader.
js):
TypeError: /Users/USER/Code/GitHub/SITE/src/layouts/Layout.tsx: twin.macro: Cannot read properties of undefined (reading '700') Learn more: https://www.npmjs.com/package/twin.macro

Disregard this reply. It worked as normal as soon as I updated postcss and autoprefixer.

I ran into the same issue with the latest versions of postcss (8.4.5), autoprefixer (10.4.1) and tailwindcss (2.2.19). What helped me fix the issue was to use the following presets section in babel.config.js:
presets: [
[
'@babel/preset-env',
{
modules: false,
},
],
[
"@babel/preset-react",
{ "runtime": "automatic", "importSource": "@emotion/react" }
],
],

See: https://emotion.sh/docs/css-prop##babel-preset

[ben-rogerson]

Hey all - just a quick update.
I've been laying some foundational features ahead of the list above.
It has been a bit of a struggle - especially with the changes to the user plugin api - but I'm nearing the end and getting ready to tackle the list above.
Thanks for being patient 👍

[ajmalafif]

the least we can do is be patient and is there anything we can do to help @ben-rogerson?

and also thank YOU for twin.macro!

[ben-rogerson]

@ajmalafif I'm going to update the list soon to show some of the "lower hanging" features. Once that's updated, I'll welcome any help on those.

[smugller]

Waiting for new version to!

[dbowling]

I’m new to the project, but I’d be happy to contribute a PR for border hidden utility as a first contribution. Not sure if this is where you want comments since I’m not seeing volunteers anywhere else and PRs are going through. Thanks!

[u3u]

🎉 The list seems all done! Will a new version be released in the near future? 😍

[ben-rogerson]

Yes, list is pretty much done woohoo!
Right now I'm going over the new features and testing for bugs.
If nothing pops up then its release time shortly after 👍

[ralphbrooks]

@ben-rogerson

VERY exciting news, and it seems like a TON of work went into this. Would it be correct to assume that 2.8.2 tracks to Tailwind 2 but that the next release will have the tailwind 3 compatibility mentioned in this issue?

In the interim, is there a guide that shows how to take this repo and turn it into a npm repo to help with final testing?

[nibtime]

Thank you so much for all this work! I've been using twin.macro for ~1 year and it has been an absolute pleasure. Can't imagine using Tailwind without it anymore.

I am really looking forward for v3 to be released ...

[ben-rogerson]

@ralphbrooks That's right, v3 Twin will track v3 Tailwindcss and contain all the features in the list above.

[raulfdm]

@ben-rogerson , what do you think about releasing a beta or a release candidate version for us testing? I think it'll be easier than cloning and linking the project locally.

To avoid pollute the latest tag, you can publish with --tag rc:

npm run publish --tag rc #or --tag beta

So we people who's gonna install twin.macro by running npm add twin.macro will still get v2 stable version and we can run npm add twin.macro@rc will get v3 to test.

[ben-rogerson]

@raulfdm Sounds like a great idea.

Release candidate is up and ready for testing:

npm install twin.macro@rc

Bugs / Issue discussion →

[nilsborg]

@ben-rogerson thank you (and everyone involved) so much for this huge effort! We're very much looking forward for the release! ❤️

[JPrisk]

moved

[alexluong]

Hi there, I'm trying out twin.macro@3.0.0-rc.2 and everything works very smoothly. However, I'm unable to deploy my project to Vercel as their Node version is 16.14.0 while the Twin requires >=16.14.2. I'm just wondering if there's a fix for this on my side or if there's anything to do to fix the issue.

Thanks a lot for your work on this package and I'd love to make it work with our project.

---

Hmmm I see that there's already a fix for this, look forward to the new version!

[wottpal]

@alexluong as a workaround you can also install dependencies with ignoring engines (needed that for vercel before)

[ben-rogerson]

📢 I've left a new update in the description

[nilsborg]

@ben-rogerson I'm seeing this in our TypeScript enabled project:

Actually not sure if this is even TS related .. ?

Just installed the latest rc

[chriskjaer]

We just switched all of landfolk.com (3 different sites in a huge monorepo) to twin.macro@3.0.0-rc.3 a few weeks ago and everything is running smoothly. Looking forward to the final release 🎉

[IgnusG]

We just switched all of landfolk.com (3 different sites in a huge monorepo) to twin.macro@3.0.0-rc.3 a few weeks ago and everything is running smoothly. Looking forward to the final release 🎉

This is actually a cool website in and of itself. Good job on the transition 👍

[snc]

I've just tried the latest twin.macro@rc together with https://github.com/tailwindlabs/tailwindcss-aspect-ratio. The aspect ratio plugin adds aspect-w-* and aspect-h-* classes, but twin.macro says that those classes do not exists and suggests the aspect-* classes instead. Maybe #626 has something to do with this case?

[ben-rogerson]

@snc I've just tested in the next rc (due out shortly) and those classes are confirmed working 🎉

[ben-rogerson]

rc.4 is now out and I've updated the base post above.
🤞 hoping it's the last rc before the next major release

Found an issue? Let me know in this discussion →

Enjoy 🎉

[ben-rogerson]

twin.macro@3.0.0 has now been released! 🥳 🎉

npm i twin.macro@latest

Thank you so so much to everyone who helped out with the bug testing 👋