Repository: next.js
Issue: create-next-app doesn't work with the default postcss config
Labels: bug

### Verify canary release

- [X] I verified that the issue exists in the latest Next.js canary release

### Provide environment information

```
    Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 21.6.0: Thu Sep 29 20:13:56 PDT 2022; root:xnu-8020.240.7~1/RELEASE_ARM64_T6000
    Binaries:
      Node: 16.17.1
      npm: 8.15.0
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 13.1.0
      eslint-config-next: 13.0.7
      react: 18.2.0
      react-dom: 18.2.0
 ```

### Which area(s) of Next.js are affected? (leave empty if unsure)

_No response_

### Link to the code that reproduces this issue

No point for this, but if really needed I can create one.

### To Reproduce

1. Create next app
2. Insert the default PostCSS config from this page: https://nextjs.org/docs/advanced-features/customizing-postcss-config
3. run build

I used this version:

```
module.exports = {
  plugins:
    process.env.NODE_ENV === 'production'
      ? [
          'postcss-flexbugs-fixes',
          [
            'postcss-preset-env',
            {
              autoprefixer: {
                flexbox: 'no-2009',
              },
              stage: 3,
              features: {
                'custom-properties': false,
              },
            },
          ],
        ]
      : [
          // No transformations in development
        ],
}
```




### Describe the Bug

**Bug 1**, you cannot build with the official default config.

Cannot build, error:

```
Error: Cannot find module 'postcss-flexbugs-fixes'
Require stack:
- node_modules/next/dist/build/webpack/config/blocks/css/plugins.js
- node_modules/next/dist/build/webpack/config/blocks/css/index.js
- node_modules/next/dist/build/webpack/config/index.js
- node_modules/next/dist/build/webpack-config.js
- node_modules/next/dist/build/index.js
- node_modules/next/dist/cli/next-build.js
- node_modules/next/dist/lib/commands.js
- node_modules/next/dist/bin/next
```

I used the following:
```
module.exports = {
  plugins:
    process.env.NODE_ENV === 'production'
      ? [
          'postcss-flexbugs-fixes',
          [
            'postcss-preset-env',
            {
              autoprefixer: {
                flexbox: 'no-2009',
              },
              stage: 3,
              features: {
                'custom-properties': false,
              },
            },
          ],
        ]
      : [
          // No transformations in development
        ],
}
```

**Bug 2**: on that page, it mentions that Autoprefixer is used, yet there is no autoprefixer installed in yarn.lock nor is found anywhere in node_modules

**Bug 3/Question 1**: The official [Tailwind example](https://github.com/vercel/next.js/blob/canary/examples/with-tailwindcss/postcss.config.js) has this:

```
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
```

This is the exact same as in TailwindCSS's documentation. Now if I understand right, using this file disabled the default PostCSS plugins of Next.js. So we shouldn't be using this, but something which merges both configs.


From all the examples, only commerce seems to have a mixed config:
https://github.com/vercel/commerce/blob/main/site/postcss.config.js


### Expected Behavior

Should build with default config. Autoprefixer should be installed by default. Recommended Tailwind config should be mixed with default Next config.

### Which browser are you using? (if relevant)

_No response_

### How are you deploying your application? (if relevant)

_No response_