fix: Use standard PostCSS configuration in create-next-app

[rozsazoltan]

Note

Why closed? I got a bit enthusiastic when submitting the PR by SO question. Later I found out there's a similar open PR from the end of May, but it still hasn't been reviewed. See: #79949

Fix remaining PostCSS config issues (follow-up to #77376).

What?

Changed the PostCSS plugin format in create-next-app templates from string array syntax to object syntax.

Why?

The array string format for PostCSS plugins is non-standard, and gives errors when loading using postcss-load-config:

TypeError: Invalid PostCSS Plugin found at: plugins[0]

This change ensures that Next.js applications using Tailwind CSS can seamlessly integrate with these tools without requiring manual configuration fixes. For example, vitest will crash, which uses postcss-load-config under the hood:
storybookjs/storybook#30878

How?

Modified the PostCSS configuration in both JavaScript and TypeScript empty app templates with Tailwind to use the object-based plugin format, which is the standard format recognized by PostCSS tools in the ecosystem.

Array syntax:

const config = {
  plugins: ["@tailwindcss/postcss"],
};

export default config;

Object syntax

 const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

[stefanprobst]

i think this is the same as #79949