cloudflare / cloudflare/vinext

init: MDX + Tailwind v4 apps fail on first build (missing @mdx-js/rollup install, postcss string-form Tailwind unresolvable)

Open
#3,240 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
8.8k
Forks
406
Avg merge
2d 6h
Merged PRs (30d)
120

Description

**Context**

`npx vinext init` on an existing Next.js app that uses MDX pages and/or Tailwind v4 — the standard shape of a Payload 3 or content-heavy app being migrated.

**Observed — two failures before the first successful build**

1. MDX: the docs say `@mdx-js/rollup` is auto-injected, but the injection only fires when the package is already installed — `init` never installs it, so the first build fails on unresolved `.mdx` imports
2. Tailwind v4: when configured through `postcss.config.mjs` with string-form plugins, the build fails under Vite with `ENOENT ... tailwindcss` (from postcss-import). Tailwind v4 needs `@tailwindcss/vite` in the vite config instead; the check's "partial support" flag hints at this but init does not act on it

**Expected**

`init` should detect the frameworks in `package.json` (`@mdx-js/*`, `tailwindcss`) and onboard them: install the missing vite-side packages and generate configs that wire them. Related: the `next.config` `webpack`-ignored warning should say explicitly that it is safe to ignore (Vite resolves TS/TSX natively), since every Payload-style `extensionAlias` config trips it today.

Fixed by #3239.

Contributor guide

Open the contributing guide

Research direction

Start in the npx vinext init entry point and inspect how package.json frameworks, postcss.config.mjs, the Vite configuration, and next.config webpack warnings are handled. Compare the existing behavior with the fix referenced by #3239. Done means MDX and Tailwind v4 apps install and wire the required packages before the first build, and the webpack warning is explicit about when it is safe to ignore.

Written by the indexing model from the issue text.

Assessment

Tech stack
nextjs, tailwindcss, typescript
Domain
build-system, frontend, tooling
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.