Skip to content

fix: Use standard PostCSS configuration in create-next-app format for ecosystem compatibility (part 2)#84122

Closed
ndelangen wants to merge 2 commits into
vercel:canaryfrom
ndelangen:norbert/follow-up-77376
Closed

fix: Use standard PostCSS configuration in create-next-app format for ecosystem compatibility (part 2)#84122
ndelangen wants to merge 2 commits into
vercel:canaryfrom
ndelangen:norbert/follow-up-77376

Conversation

@ndelangen
Copy link
Copy Markdown

@ndelangen ndelangen commented Sep 23, 2025

What?

See #77376 by @kasperpeulen

This PR continues what was done there, converting the remainning template postcss config files to the standard format.

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": {},
  },
};

@ijjk ijjk added the create-next-app Related to our CLI tool for quickly starting a new Next.js application. label Sep 23, 2025
@ijjk
Copy link
Copy Markdown
Member

ijjk commented Sep 23, 2025

Allow CI Workflow Run

  • approve CI run for commit: 9470d0d

Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer

@stefanprobst
Copy link
Copy Markdown
Contributor

cf #79949

@stefanprobst
Copy link
Copy Markdown
Contributor

@ndelangen #79949 has been merged so i think this one can be closed.

@ndelangen ndelangen closed this Oct 13, 2025
@github-actions github-actions Bot locked as resolved and limited conversation to collaborators Oct 28, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

create-next-app Related to our CLI tool for quickly starting a new Next.js application. locked

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants