The code returns the following error:
./app/globals.css
Error evaluating Node.js code
CssSyntaxError: tailwindcss: /vercel/share/v0-next-shadcn/app/globals.css:1:1: Cannot apply unknown utility class `font-semibold`
[at Input.error (turbopack:///[project]/node_modules/.pnpm/postcss@8.5.6/node_modules/postcss/lib/input.js:135:16)]
[at Root.error (turbopack:///[project]/node_modules/.pnpm/postcss@8.5.6/node_modules/postcss/lib/node.js:146:32)]
[at Object.Once (/vercel/share/v0-next-shadcn/node_modules/.pnpm/@tailwindcss+postcss@4.2.0/node_modules/@tailwindcss/postcss/dist/index.js:10:6913)]
[at async LazyResult.runAsync (turbopack:///[project]/node_modules/.pnpm/postcss@8.5.6/node_modules/postcss/lib/lazy-result.js:293:11)]
[at async transform (turbopack:///[turbopack-node]/transforms/postcss.ts:70:34)]
[at async run (turbopack:///[turbopack-node]/ipc/evaluate.ts:92:23)]
Import trace:
Client Component Browser:
./app/globals.css [Client Component Browser]
./app/layout.tsx [Server Component]
Revise the code to address the error.
I see the issue. In Tailwind v4 with the PostCSS plugin, we need to add the @tailwind directives at the top of the file before using @layer. Let me fix this:
I've added the proper Tailwind v4 directives (@tailwind base, @tailwind components, and @tailwind utilities) at the top of globals.css. These directives initialize Tailwind's CSS generation and make all utility classes available, which resolves the "unknown utility class" error. The site should now build correctly.
The issue is that Tailwind is trying to parse @layer base with font-semibold but the @theme hasn't been processed yet. The problem is the structure of globals.css with @layer base containing utility references. Let me completely rewrite globals.css to work properly with Tailwind v4:
Now let me fix the globals.css by removing @apply directives from @layer base and using plain CSS instead:
I've rewritten the globals.css to use plain CSS properties instead of @apply directives in the @layer base section. This bypasses the Tailwind v4 PostCSS plugin parsing issue. The design system is now fully functional with the neutral enterprise palette, typography hierarchy, and animations. The site should now build and display the landing page correctly.
You can send messages while the preview loads