chore: use Tailwind Turbopack loader instead of PostCSS

[laugharn]

Summary

Aligns apps/template and apps/docs with the new create-next-app default from vercel/next.js#96606, which uses @tailwindcss/turbopack and a Turbopack CSS loader rule for Tailwind projects on the Turbopack path, avoiding the PostCSS setup. (@tailwindcss/postcss + postcss.config.mjs remain the upstream default only for non-Turbopack bundlers.)

Today CSS takes a detour — Turbopack spins up a Node worker, parses to a PostCSS AST, and hands Tailwind a string it already knows how to compile. The dedicated loader skips that hop and calls Tailwind's engine directly.

Per app:

• add the turbopack.rules CSS rule to next.config.ts, matching the shape create-next-app now generates
• delete postcss.config.mjs
• swap @tailwindcss/postcss → @tailwindcss/turbopack@4.3.3 and drop the now-unused postcss dep

turbopack: {
  rules: {
    "*.css": { as: "*.css", loaders: ["@tailwindcss/turbopack"] },
  },
},

No globals.css changes are needed. @import "tailwindcss", @plugin '@tailwindcss/typography', @theme inline, and tw-animate-css all work unchanged, and no postcss references remain outside the lockfile.

Verification

• pnpm exec next build in apps/template → exit 0
• pnpm exec next build in apps/docs → exit 0
• CSS equivalence vs. a PostCSS baseline built before the swap (sorted diff): template 118,766 bytes both ways, identical; docs 187,494 bytes both ways, identical. Spot-checked .bg-shop{background-color:#5a31f4} (the @theme inline token), prose (typography plugin), animate-in (tw-animate-css), and the docs fd- / shop-home scopes.
• next dev → GET / 200, stylesheet served unminified at 149,386 bytes with .bg-shop, .hover\:bg-shop\/85:hover, and .cursor-pointer present.
• pnpm lint template → 0 warnings, 0 errors, formatting clean
• pnpm lint docs → 0 errors, 1 pre-existing no-img-element warning in app/[lang]/og/[...slug]/route.tsx (untouched, Satori-required)
• pnpm typecheck docs → clean

Build times are within noise (~10s cold both ways) on these apps; Tailwind's ~2x number is CSS-compile-time in isolation, which isn't the bottleneck here. The reason to land this is staying on the Next.js default path.

Notes

• No changeset: .changeset/config.json ignores template and docs.
• Nothing in apps/docs/content/docs/ documents the CSS pipeline today, so there's no doc page to update. Worth deciding separately whether the styling setup should get one now that it diverges from the @tailwindcss/postcss setup most people expect.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
shop-docs	Ready	Preview	Aug 5, 2026 3:33pm
shop-template	Ready	Preview, v0	Aug 5, 2026 3:33pm

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	npm/​@​tailwindcss/​turbopack@​4.3.3

View full report