[SOLVED] TailwindCSS v4 not picking classes

I am doing work in a monorepo where I have 2 apps. The first is NextJS and the second one is React.js. I have recently upgraded Tailwind CSS version to the latest one. But the issue is that my CSS below is not applying after upgrading. I have followed multiple docs and did some customizations but I have not been able to succeed on this. Could you please have a look and guide me?
/* 
@tailwind base;
@tailwind components;
@tailwind utilities; */

@import 'tailwindcss';

@theme {
  /* Typography */
  --h1: 'text-gray-900';
  --h2: 'text-3xl md:text-4xl font-bold text-gray-900';
  --h3: 'text-2xl md:text-3xl font-bold text-gray-900';
  --h4: 'text-xl md:text-2xl font-semibold text-gray-900';
  --h5: 'text-lg md:text-xl font-semibold text-gray-900';
  --h6: 'text-base md:text-lg font-semibold text-gray-900';
  --subtitle: 'text-xl text-gray-600';
  --body: 'text-base text-gray-700';
  --body-sm: 'text-sm text-gray-700';
  --caption: 'text-sm text-gray-500';
  --color-mint-500: oklch(0.72 0.11 178);

  /* Links */
  --link: 'text-gray-600 hover:text-primary-500 font-medium transition-colors duration-200';
  --link-muted: 'text-gray-500 hover:text-gray-700 transition-colors duration-200';
  --link-primary: 'text-primary-500 hover:text-primary-600 font-medium transition-colors duration-200';
  --link-underline: 'text-gray-600 hover:text-primary-500 underline transition-colors duration-200';

  /* Spacing */
  --section: 'py-20';
  --container-padded: 'container mx-auto px-4';

  /* Buttons */
  --btn: 'px-6 py-3 rounded-lg font-medium transition-colors text-center inline-block';
  --btn-sm: 'px-4 py-2 rounded-lg font-medium transition-colors text-center inline-block text-sm';
  --btn-lg: 'px-8 py-4 rounded-lg font-medium transition-colors text-center inline-block text-lg';
  --btn-primary: 'bg-primary-500 text-white hover:bg-primary-600';
  --btn-secondary: 'bg-white text-primary-500 border border-primary-500 hover:bg-gray-50';
  --btn-white: 'bg-white text-primary-500 hover:bg-gray-100';
  --btn-outline: 'bg-transparent text-white border border-white hover:bg-primary-600'; /* Cards */
  --card: 'bg-white rounded-lg shadow-sm overflow-hidden';
  --card-hover: 'transition-all duration-300 hover:shadow-md';

  /* Features */
  --feature-card: 'bg-gray-50 p-8 rounded-lg';
  --feature-icon: 'text-primary-500 mb-4 h-12 w-12';

  /* Sections */
  --hero-section: 'bg-gradient-to-b from-white to-gray-50';
  --section-title-container: 'text-center mb-16';
  --cta-section: 'bg-primary-500 text-white';
}

@layer components {
  /* Typography */
  .h1 {
    @reference text-4xl md:text-5xl font-bold text-gray-900;
  }

  .h2 {
    @reference text-3xl md:text-4xl font-bold text-gray-900;
  }

  .h3 {
    @reference text-2xl md:text-3xl font-bold text-gray-900;
  }

  .h4 {
    @reference text-xl md:text-2xl font-semibold text-gray-900;
  }

  .h5 {
    @reference text-lg md:text-xl font-semibold text-gray-900;
  }

  .h6 {
    @reference text-base md:text-lg font-semibold text-gray-900;
  }

  .subtitle {
    @reference text-xl text-gray-600;
  }

  .body {
    @reference text-base text-gray-700;
  }

  .body-sm {
    @reference text-sm text-gray-700;
  }

  .caption {
    @reference text-sm text-gray-500;
  }

  /* Links */
  .link {
    @reference text-gray-600 hover:text-primary-500 font-medium transition-colors duration-200;
  }

  .link-muted {
    @reference text-gray-500 hover:text-gray-700 transition-colors duration-200;
  }

  .link-primary {
    @reference text-primary-500 hover:text-primary-600 font-medium transition-colors duration-200;
  }

  .link-underline {
    @reference text-gray-600 hover:text-primary-500 underline transition-colors duration-200;
  }

  /* Spacing */
  .section {
    @reference py-20;
  }

  .container-padded {
    @reference container mx-auto px-4;
  }

  /* Buttons */
  .btn {
    @reference px-6 py-3 rounded-lg font-medium transition-colors text-center inline-block;
  }

  .btn-sm {
    @reference px-4 py-2 rounded-lg font-medium transition-colors text-center inline-block text-sm;
  }

  .btn-lg {
    @reference px-8 py-4 rounded-lg font-medium transition-colors text-center inline-block text-lg;
  }

  .btn-primary {
    @reference bg-primary-500 text-white hover:bg-primary-600;
  }

  .btn-secondary {
    @reference bg-white text-primary-500 border border-primary-500 hover:bg-gray-50;
  }

  .btn-white {
    @reference bg-white text-primary-500 hover:bg-gray-100;
  }

  .btn-outline {
    @reference bg-transparent text-white border border-white hover:bg-primary-600;
  }

  /* Cards */
  .card {
    @reference bg-white rounded-lg shadow-sm overflow-hidden;
  }

  .card-hover {
    @reference transition-all duration-300 hover:shadow-md;
  }

  /* Features */
  .feature-card {
    @reference bg-gray-50 p-8 rounded-lg;
  }

  .feature-icon {
    @reference text-primary-500 mb-4 h-12 w-12;
  }

  /* Sections */
  .hero-section {
    @reference bg-gradient-to-b from-white to-gray-50;
  }

  .section-title-container {
    @reference text-center mb-16;
  }

  .cta-section {
    @reference bg-primary-500 text-white;
  }
}