I just tried using tailwind V4 In my react project. my configuration all are okay everything is fine. then i added classes in tailwind configuration. but classes are not applying as expected

here is my tailwind config:

@theme {
  /* Font */

  --font-style: "DM Sans", "sans-serif";

  /* Typography */

  --text-body-lg: 18px;

  --text-display: 44px;
  --text-display--font-weight: 800;

  --text-h1: 40px;
  --text-h1--font-weight: 800;

  --text-h2: 36px;
  --text-h2--font-weight: 800;

  --text-h3: 32px;
  --text-h3--font-weight: 800;

  --text-h4: 28px;
  --text-h4--font-weight: 800;

  --text-h5: 24px;
  --text-h5--font-weight: 800;

  --text-h6: 20px;
  --text-h6--font-weight: 800;

  /* Colors */

  /* Colors - Brand */
  --color-brand-blue: #072446;
  --color-brand-blue-alt: #013a67;
  --color-brand-yellow: #e1aa12;
  --color-brand-green: #008089;

  /* Colors - Background */
  --color-primary-bg: #ffffff;
  --color-secondary-bg: #f5f5f4;
  --color-tertiary-bg: #f8f8ff;

  /* Colors - Text */
  --color-primary-text: #020b15;
  --color-secondary-text: #4c4c4c;
  --color-tertiary-text: #f5f5f4;
}

Then i started using these custom clasess

❌ Not Working, this case the heading styles not applying in small devices

✅ Working, this case the heading styles are working properly

Is there something wrong with my setup? How can I fix this?