reactjstailwind-cssviteshadcnui

ShadCN and TailwindCSS V4 causing error [plugin:@tailwindcss/vite:generate:serve] Unexpected semicolon

I am currently trying to make a new project on React 19 using Vite, TailwindCSS V4 and ShadCN. Been following the documentation from ShadCN. After initializing the shadCN with command pnpm dlx shadcn@canary init, which adds the components.json and sets up the CSS variables, it breaks the application. The error message is the following
[vite] Internal server error: Unexpected semicolon
Plugin: @tailwindcss/vite:generate:serve
File: C:/Users/joni/Documents/GitHub/txtcompare/src/index.css.
If I remove the styling it has created to the index.css, it works but of course then the styling is gone. Has anyone else encountered this?

Solution

  • I encountered this issue earlier too. Turns out there was an additional semicolon in index.css, on this line:

      --radius: 0.625rem;;

    Just remove the extra semicolon at the back and it should work fine!