Why does using @theme with TailwindCSS v4.1 breaks my complete styling done from default TailwindCSS

I am making a React Application using Vite and TailwindCSS v4.1

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
})

Inside the index.css, imported tailwindcss and it was working all fine. But as i added @theme to apply customs theme, the complete styling breaks down as if there was no styling.

index.css

@import "tailwindcss"

@theme {
    --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;

    --color-primary-50: 239 246 255;
    --color-primary-100: 219 234 254;
    --color-primary-200: 191 219 254;
    --color-primary-300: 147 197 253;
    --color-primary-400: 96 165 250;
    --color-primary-500: 59 130 246;
    --color-primary-600: 37 99 235;
    --color-primary-700: 29 78 216;
    --color-primary-800: 30 64 175;
    --color-primary-900: 30 58 138;
    --color-primary-950: 23 37 84;

    --color-accent-50: 245 243 255;
    --color-accent-100: 237 233 254;
    --color-accent-200: 221 214 254;
    --color-accent-300: 196 181 253;
    --color-accent-400: 167 139 250;
    --color-accent-500: 139 92 246;
    --color-accent-600: 124 58 237;
    --color-accent-700: 109 40 217;
    --color-accent-800: 91 33 182;
    --color-accent-900: 76 29 149;
    --color-accent-950: 46 16 101;

    --color-success-50: 236 253 245;
    --color-success-100: 209 250 229;
    --color-success-200: 167 243 208;
    --color-success-300: 110 231 183;
    --color-success-400: 52 211 153;
    --color-success-500: 16 185 129;
    --color-success-600: 5 150 105;
    --color-success-700: 4 120 87;
    --color-success-800: 6 95 70;
    --color-success-900: 6 78 59;
    --color-success-950: 2 44 34;

    --color-warning-50: 255 251 235;
    --color-warning-100: 254 243 199;
    --color-warning-200: 253 230 138;
    --color-warning-300: 252 211 77;
    --color-warning-400: 251 191 36;
    --color-warning-500: 245 158 11;
    --color-warning-600: 217 119 6;
    --color-warning-700: 180 83 9;
    --color-warning-800: 146 64 14;
    --color-warning-900: 120 53 15;
    --color-warning-950: 69 26 3;

    --color-error-50: 254 242 242;
    --color-error-100: 254 226 226;
    --color-error-200: 254 202 202;
    --color-error-300: 252 165 165;
    --color-error-400: 248 113 113;
    --color-error-500: 239 68 68;
    --color-error-600: 220 38 38;
    --color-error-700: 185 28 28;
    --color-error-800: 153 27 27;
    --color-error-900: 127 29 29;
    --color-error-950: 69 10 10;

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes slideUp {
        from {
            transform: translateY(10px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    @keyframes bounceLight {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-5px); }
    }
    --animate-fade-in: fadeIn 0.3s ease-in-out;
    --animate-slideUp: slideUp 0.3s ease-out;
    --animate-bounceLight: bounceLight 1s infinite;
}

package.json

{
  "name": "rename-wave",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "@tailwindcss/vite": "^4.1.7",
    "lucide-react": "^0.511.0",
    "react": "^19.1.0",
    "react-dom": "^19.1.0",
    "react-router-dom": "^7.6.0",
    "tailwindcss": "^4.1.7"
  },
  "devDependencies": {
    "@eslint/js": "^9.25.0",
    "@types/react": "^19.1.2",
    "@types/react-dom": "^19.1.2",
    "@vitejs/plugin-react-swc": "^3.9.0",
    "eslint": "^9.25.0",
    "eslint-plugin-react-hooks": "^5.2.0",
    "eslint-plugin-react-refresh": "^0.4.19",
    "globals": "^16.0.0",
    "typescript": "~5.8.3",
    "typescript-eslint": "^8.30.1",
    "vite": "^6.3.5"
  }
}

How do I fix it? Any suggestions would be helpful.

Removed the complete custom styling and added an empty @theme to the css file also breaks the styling completely. So i guess there is some issue with @theme but what exactly cannot be figured out. I even tried removing and reinstalling tailwindcss but it still dosen't work. What should I do ?

CSS requires that every line of code be terminated with a semicolon, so one is also needed at the end of @import "tailwindcss":

@import "tailwindcss";

@theme {
  /* ... */
}