How to Fix the ShadCN TailwindCSS V4 Unexpected Semicolon Error in Your Project

by

If you’re setting up a shiny new React project with Vite, TailwindCSS v4, and ShadCN, and you hit an error like [plugin:@tailwindcss/vite:generate:serve] Unexpected semicolon, don’t panic—you’re not alone! It’s like trying to build a LEGO set and finding an extra piece that jams everything up. This error has been popping up since TailwindCSS v4 and ShadCN started playing together, especially with Vite in the mix. In this guide, I’ll walk you through what’s causing this pesky problem, why it’s happening, and how to fix the ShadCN TailwindCSS V4 unexpected semicolon error step-by-step. Think of me as your coding buddy, here to help you get back to building awesome stuff. Let’s dive in!

What’s This “Unexpected Semicolon” Error?

Picture this: you’re running npm run dev to see your React app in action, and instead of a smooth launch, Vite crashes with something like:

[vite] Internal server error: Unexpected semicolon
Plugin: @tailwindcss/vite:generate:serve
File: /path/to/your/project/src/index.css

This error comes from the @tailwindcss/vite plugin, which integrates TailwindCSS v4 into your Vite setup. It’s complaining about a semicolon (;) in your CSS file—usually index.css—that it doesn’t expect. It’s like Vite’s saying, “Whoa, what’s this extra punctuation doing here?”

Why It Happens with ShadCN and TailwindCSS v4

ShadCN is a collection of reusable UI components styled with TailwindCSS, and it’s awesome for quick setups. TailwindCSS v4, released in early 2025, brought a slick new way to handle styles—no more mandatory tailwind.config.js file, just pure CSS magic. But when you pair it with ShadCN’s setup process (via npx shadcn@latest init or the canary version), things can get messy. The error often stems from:

  • ShadCN’s CSS Template: The init command generates a CSS file with variables that sometimes include an extra semicolon (e.g., 0.625rem;;).
  • TailwindCSS v4 Parsing: The @tailwindcss/vite plugin is super strict about syntax in v4, and that extra semicolon trips it up.
  • Vite Integration: Vite’s fast build system catches this during the “serve” phase, halting your dev server.

Let’s fix it so you can get back to coding!

Step 1: Check Your CSS File for the Culprit

The first stop is your CSS file—usually src/index.css—where ShadCN sets up its styles. This is where the unexpected semicolon hides.

What to Look For

After running npx shadcn@latest init (or pnpm dlx shadcn@canary init for React 19/Tailwind v4 support), you might see something like this in index.css:

@import "tailwindcss";

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 47.4% 11.2%;
  --radius: 0.625rem;; /* Double semicolon! */
}

That ;; after 0.625rem is the troublemaker. CSS doesn’t like extra semicolons—they’re like saying “the end” twice in a sentence.

Quick Fix

Open index.css and remove the extra semicolon:

@import "tailwindcss";

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 47.4% 11.2%;
  --radius: 0.625rem; /* One semicolon, all good */
}

Save it, restart your dev server with npm run dev, and check if the error’s gone. If it works, awesome—you’ve fixed the ShadCN TailwindCSS V4 unexpected semicolon error! If not, keep reading.

Step 2: Verify Your Vite Configuration

Sometimes the issue isn’t just the CSS—it’s how Vite and TailwindCSS v4 are talking to each other. Let’s check your vite.config.js.

What It Should Look Like

For TailwindCSS v4 with Vite, your config should include the @tailwindcss/vite plugin:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": "/src", // Optional, for ShadCN imports
    },
  },
});
  • react(): Handles React.
  • tailwindcss(): Integrates Tailwind v4 with Vite.

Common Mistake

If you’re using an older PostCSS setup (like from Tailwind v3), you might have:

import postcss from "postcss";
import tailwindcss from "tailwindcss";

plugins: [react(), postcss([tailwindcss()])],

Tailwind v4 doesn’t need PostCSS anymore—the @tailwindcss/vite plugin is the new way. Update to the config above, reinstall dependencies, and test again.

Reinstall Dependencies

npm uninstall tailwindcss postcss autoprefixer
npm install -D @tailwindcss/vite
npm run dev

Step 3: Update ShadCN and TailwindCSS v4

This error popped up in early 2025 when Tailwind v4 and ShadCN’s canary releases were fresh (see GitHub issue #6758). Updates might’ve fixed it.

Check Versions

In your package.json, look at:

"devDependencies": {
  "@tailwindcss/vite": "^4.0.0",
  "shadcn": "latest" // or "@shadcn/ui": "canary"
}
  • Tailwind v4: Ensure you’re on the latest (^4.0.0 or higher).
  • ShadCN: Use the canary version for v4 support (pnpm dlx shadcn@canary init).

Update and Reinitialize

npm install -D @tailwindcss/vite@latest
pnpm dlx shadcn@canary init
npm run dev

The canary CLI might generate cleaner CSS without the semicolon bug.

Step 4: Debug the Root Cause

If the error sticks around, let’s play detective. The semicolon might not be the only issue—something else could be off.

Look at the Full Error

The console might say:

[vite] Internal server error: Unexpected semicolon
Plugin: @tailwindcss/vite:generate:serve
File: /path/to/src/index.css:3:15

Line 3, column 15—that’s your clue. Open index.css and check that spot.

Common ShadCN Bug

A known issue (GitHub #6737) showed ShadCN’s init adding --radius: 0.625rem;;. If you see this, manually fix it as in Step 1. This was a template glitch in early canary releases, so re-running with the latest might dodge it.

Test a Clean Setup

Create a fresh project to isolate the issue:

npm create vite@latest test-app -- --template react
cd test-app
npm install -D @tailwindcss/vite
pnpm dlx shadcn@canary init

Edit vite.config.js as above, run npm run dev, and see if it works. If it does, compare it to your original project.

Strategy 5: Work Around with Manual CSS

If the CLI keeps messing up, skip it and set up ShadCN manually with Tailwind v4.

Manual Steps

  1. Install Tailwind v4:
   npm install -D @tailwindcss/vite
  1. Config Vite (as in Step 2).
  2. Create index.css:
   @import "tailwindcss";

   :root {
     --background: 0 0% 100%;
     --foreground: 222.2 47.4% 11.2%;
     --radius: 0.5rem; /* Safe value, no extras */
   }
  1. Import in main.jsx:
   import "./index.css";
   import { createRoot } from "react-dom/client";
   import App from "./App";

   createRoot(document.getElementById("root")).render(<App />);
  1. Add a ShadCN Component:
    Run pnpm dlx shadcn@canary add button to grab a component, then test.

This bypasses the buggy init and fixes the ShadCN TailwindCSS V4 unexpected semicolon error.

Why This Happens (The Techy Bit)

TailwindCSS v4 ditched the old tailwind.config.js for a CSS-first approach, using @import "tailwindcss" and native variables. ShadCN’s CLI, built for v3 compatibility, didn’t fully adapt early on, tossing in extra semicolons. The @tailwindcss/vite plugin, being strict about syntax, catches this during Vite’s serve phase—hence the error.

Prevent It Next Time

Wrapping Up: You’ve Nailed It!

The [plugin:@tailwindcss/vite:generate:serve] Unexpected semicolon error is a bump in the road when pairing ShadCN with TailwindCSS v4, but you’ve got the tools to fix it. Whether it’s trimming that sneaky semicolon, tweaking your Vite config, updating packages, or going manual, you’ll have your React app running smooth as butter. So, fire up your terminal, try these fixes, and get back to crafting killer UIs—no errors allowed!

More Article:

Leave a Comment