Yarn add tailwind compat package error

[sshquack]

Steps to repro

Create react app using https://create-react-app.dev/docs/getting-started

$ npx create-react-app my-app
$ cd my-app
$ yarn build

Update to v2 of Yarn https://yarnpkg.com/getting-started/migration

$ yarn set version berry
$ echo "nodeLinker: node-modules" >> .yarnrc.yml
$ yarn build

So far so good. Now try to install TailwindCSS compat build according to https://tailwindcss.com/docs/guides/create-react-app#install-tailwind-via-npm

$ yarn add tailwindcss@npm:@tailwindcss/postcss7-compat
➤ YN0000: ┌ Resolution step
➤ YN0001: │ Error: tailwindcss@npm:@tailwindcss/postcss7-compat isn't supported by any available resolver
    at n.getResolverByDescriptor (/Users/someone/a-react-app/.yarn/releases/yarn-berry.cjs:2:336683)
    at n.bindDescriptor (/Users/someone/a-react-app/.yarn/releases/yarn-berry.cjs:2:336048)
    at d (/Users/someone/a-react-app/.yarn/releases/yarn-berry.cjs:2:357409)
    at async Promise.all (index 0)
    at async ie.resolveEverything (/Users/someone/a-react-app/.yarn/releases/yarn-berry.cjs:2:358614)
    at async /Users/someone/a-react-app/.yarn/releases/yarn-berry.cjs:2:377271
    at async f.startTimerPromise (/Users/someone/a-react-app/.yarn/releases/yarn-berry.cjs:2:389740)
    at async ie.install (/Users/someone/a-react-app/.yarn/releases/yarn-berry.cjs:2:377210)
    at async /Users/someone/a-react-app/.yarn/releases/yarn-berry.cjs:2:33217
    at async Function.start (/Users/someone/a-react-app/.yarn/releases/yarn-berry.cjs:2:388437)
➤ YN0000: └ Completed
➤ YN0000: Failed with errors in 0s 110ms

System info

$ yarn --version
2.4.0
$ node --version
v14.15.4

Repo to reproduce this issue

https://github.com/sshquack/tailwind-yarn-bug

[adamwathan]

This sounds like a Yarn 2 or system related issue to me unfortunately, as this works as expected with npm. Going to close as no plans to dig in to this ourselves and this is the first time it has been reported. If it's a widespread issue we can circle back, or hopefully someone who actually uses Yarn 2 and has run into it and fixed it can share their solution.

[sshquack]

@adamwathan Sorry for the faulty bug report. This is definitely a yarn 2 bug. Thanks for creating TailwindCSS 🙏

For anyone else running into this issue, the fix is to specify the package version.

yarn add tailwindcss@npm:@tailwindcss/postcss7-compat@^2.0.2

The root cause of the bug was because Yarn 2 doesn't handle alias without range properly. See the Yarn 2 issue here yarnpkg/berry#1816

If anyone is using React + TailwindCSS compat, hopefully after CRA supports PostCSS8, we can drop the compat package and use the mainline version. See this issue facebook/create-react-app#10456

[D3strukt0r]

Sorry for bringing this back.

Just came across this, and the issue still exists. Maybe to make it easier for anyone in the future, the yarn equivalent commands could be added to the docs (https://tailwindcss.com/docs/guides/create-react-app)

yarn add --dev tailwindcss@npm:@tailwindcss/postcss7-compat@^2 postcss@^7 autoprefixer@^9

yarn add @craco/craco

... did it for me