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 →

• [x] [email protected] - Contains the latest tailwindcss updates →
• [x] [email protected] - Release notes →
• [x] [email protected] - Release notes →

Newest update - rc.4

• 🌟 Update and use new tailwindcss features as soon as they're released
  tailwindcss was moved to peerDependencies meaning you can install new versions of tailwindcss as soon as they're released
• 🌟 Full plugin support
  twin now recognises all tailwindcss plugins now that it shares the same API
• Disabling core plugins in tailwind.config.js is now supported
  Most people will use this feature just to turn off preflight styles
• Turn off console log coloring
  Sometimes frameworks add twin's error logs in their error overlay which doesn't support the custom log colours twin uses. A bunch of color characters are added making it hard to read - you can clean this up now with hasLogColors: false added in your twin config
• Better suggestions
  Twin will make better recommendations if you get class wrong
• Better performance
  You'll see much faster conversions, specially in larger codebases

More at https://github.com/ben-rogerson/twin.macro/pull/739

History

[email protected]

• [x] Add border-hidden utility ben added this in #678
• [x] Add will-change utilities ben added this in #612
• [x] Add native aspect-ratio utilities @omaemae added this in #626
• [x] Add column utilities @ChrisEbert added this in #633
• [x] Add break-before, break-inside and break-after utilities @ChrisEbert added this in #632
• [x] Add text-indent utilities @ChrisEbert added this in #634
• [x] Add align-sub and align-super vertical-align utilities ben added this in ref
• [x] Add scroll-behavior utilities @atxiii added this in #641
• [x] Add flex-basis utilities ben added this in ref
• [x] Add grow-* and shrink-* utilities, deprecate flex-grow-* and flex-shrink-* ben added this in ref
• [x] Add overflow-clip, overflow-x-clip and overflow-y-clip utilities ben added this in ref
• [x] Add inherit to default color palette ben added this in #614
• [x] Add full color palette for fill-* and stroke-* utilities (only required tests added) ben added this in #614
• [x] Add fit-content values for min/max-width/height utilities ben added this in #615
• [x] Add min/max-content values for min/max-height utilities ben added this in #615
• [x] Add all standard cursor-* values by default (only requires tests added)
• [x] Enable extended color palette by default with updated color names (only required tests added) ben added this in #614
• [x] Add menu reset to preflight ben added this in #617
• [x] Add file variant for ::file-selector-button pseudo element @ChrisEbert added this in #631
• [x] Rename overflow-clip to text-clip and overflow-ellipsis to text-ellipsis @ChrisEbert added this in #630
• [x] Deprecate decoration-slice and decoration-break in favor box-decoration-slice and box-decoration-break ben added this in #655
• [x] ~~Add print variant for targeting printed media~~ Twin already had this
• [x] ~~Add placeholder variant~~ Twin already had this
• [x] ~~Add portrait and landscape variants~~ Twin already had this
• [x] Add arbitrary values to the align class ben added this in #672
• [x] Sync filter related class behaviour with tailwind @mohammadsiyou added this in #671
• [x] Add first-class negative value support, c48e629 ben added this in #611
• [x] Add colored box shadow utilities ben added this in #656
• [x] Add text-decoration-{color/style/thickness/offset} utilities, #6004 ben added this in #655
• [x] Add outline-style, outline-color, outline-width and outline-offset utilities
• [x] Add accent-color utilities
• [x] Add scroll<Margin | Padding | SnapAlign | SnapStop | SnapType | Behavior> @atxiii added this in #641
• [x] Add touch-action utilities, #6115 ben added this in #669
• [x] Add border-x and border-y width and color utilities ben added this in #627
• [x] Add [open] variant ben added this in #652
• [x] Add comprehensive "arbitrary value" support, #6233, #6259, #6258, #6283 ben added this in #648
• [x] Support color opacity shorthand when using arbitrary values for colors ben added this in #616
• [x] Sync theme import behaviour with objects containing DEFAULT ben added this in #650
• [x] Remove dependency on modern-normalize, inline and consolidate with Preflight (#5358) (Sync with tailwind preflight latest) ben added this in #617
• [x] Don't use pointer cursor on disabled buttons by default
• [x] Set default content value in preflight instead of within each before/after utility ben added this in #621
• [x] Preserve original color format when adding opacity whenever possible
• [x] Fix text decoration utilities from overriding the new text decoration color/style/thickness utilities when used with a modifier ben added this in #651

[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!

[lightyen]

Missing:

• [ ] https://github.com/tailwindlabs/tailwindcss/pull/4723

[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 [email protected] 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 [email protected] 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 [email protected] 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 👍