chore(examples): add postcss as tailwindcss dependency (#1497)

[navid-kalaei]

Problem

tailwind cannot run without postcss for the tailwindcss example

Error log

$ yarn build:css
yarn run v1.22.17
$ tailwindcss -o ./app/tailwind.css
node:internal/modules/cjs/loader:936
  throw err;
  ^

Error: Cannot find module 'postcss'
Require stack:
- ~/remix/examples/tailwindcss/node_modules/tailwindcss/lib/lib/generateRules.js
- ~/remix/examples/tailwindcss/node_modules/tailwindcss/lib/lib/expandTailwindAtRules.js
- ~/remix/examples/tailwindcss/node_modules/tailwindcss/lib/processTailwindFeatures.js
- ~/remix/examples/tailwindcss/node_modules/tailwindcss/lib/cli.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (~/remix/examples/tailwindcss/node_modules/tailwindcss/lib/lib/generateRules.js:6:39)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '~/remix/examples/tailwindcss/node_modules/tailwindcss/lib/lib/generateRules.js',
    '~/remix/examples/tailwindcss/node_modules/tailwindcss/lib/lib/expandTailwindAtRules.js',
    '~/remix/examples/tailwindcss/node_modules/tailwindcss/lib/processTailwindFeatures.js',
    '~/remix/examples/tailwindcss/node_modules/tailwindcss/lib/cli.js'
  ]
}
error Command failed with exit code 1.

Success log

$ yarn build:css
yarn run v1.22.17
$ tailwindcss -o ./app/tailwind.css

Done in 278ms.
Done in 0.99s.

Related issue

#1497

[remix-cla-bot]

Hi @navid-kalaei,

Welcome, and thank you for contributing to Remix!

Before we consider your pull request, we ask that you sign our Contributor License Agreement (CLA). We require this only once.

You may review the CLA and sign it by adding your name to contributors.yml.

Once the CLA is signed, the CLA Signed label will be added to the pull request.

If you have already signed the CLA and received this response in error, or if you have any questions, please contact us at hello@remix.run.

Thanks!

- The Remix team

[remix-cla-bot]

Thank you for signing the Contributor License Agreement. Let's get this merged! 🥳

[mcansh]

are you using yarn to manage your dependencies? tailwind has postcss as a peer dependency and yarn doesn't automatically install those like npm does tailwindlabs/tailwindcss#6916 (comment)

so it might be worth noting this in the example's README and on the styling guide

[navid-kalaei]

yes, I use yarn. however, thinking of Remix as a standard project, I expect that to be easy to install with major package managers including yarn.

[MichaelDeBoey]

If you're using the Tailwind CLI (which we are in this example), you don't need to install postcss

[jacob-ebey]

If you're using the Tailwind CLI (which we are in this example), you don't need to install postcss

If you are using yarn you do because the tailwind cli improperly marks PostCSS as a peer dependency. See Logan's comment / link above.

[kentcdodds]

Thank you!