Tailwindcss V4 - Error: @source cannot be nested.

[billpebert]

Hi, i'm upgrading the tailwindcss using npx @tailwindcss/upgrade

I got this error in my terminal

Here is the configuration on my app.css

/* Import statements must come first */
@import 'tailwindcss'
@import './fonts.css' layer(base)
@import '../../node_modules/aos/dist/aos.css' layer(base)
@import '../../node_modules/flickity/css/flickity.css' layer(base)
@import '../../node_modules/swiper/swiper-bundle.css' layer(base)
@import './marquee.css' layer(utilities)
@import './faq.css' layer(utilities)
@import './integration-slider.css' layer(utilities)
@import '../../node_modules/bootstrap-icons/font/bootstrap-icons.css' layer(utilities)
@import './sweet-alert.css' layer(utilities)

/* Configuration */
@config "../../tailwind.config.js"

/* Custom variants */
@custom-variant dark (&:is(.dark *))

@theme {
  --breakpoint-*: initial;
  --breakpoint-xs: 475px;
  --breakpoint-1xl: 1400px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  --font-inter: Inter, sans-serif;
  --font-jakarta_sans: Plus Jakarta Sans, sans-serif;
  --font-playfair: 'Playfair Display', serif;

  --color-cs-1: #d991e9;

  --color-primary-100: #f3e8fb;
  --color-primary-200: #eb95ff;
  --color-primary: #ba37da;

  --color-dark-100: #141410;
  --color-dark-200: #212220;
  --color-dark-300: #191a17;
  --color-dark: #131410;
  --color-dark-gradient: #191917;

  --color-cs-gray-50: #f7f7f7;
  --color-cs-gray-100: #ddd3e0;
  --color-cs-gray-200: #dbc5e0;
  --color-cs-gray: #f7f1f8;
  --color-cs-gray-dark-gradient: rgba(217, 224, 197, 0.07);

  --color-border-colour: #ede6f0;
  --color-border-colour-dark: #373935;

  --color-paragraph: #18181b;
  --color-paragraph-light: #5d6167;

  --background-color-offen: #f3f4f6;
  --background-color-ubersprungen: #f3f4f6;
  --background-color-keininteresse: #fde8e8;
  --background-color-wiedervorlage: #fdf6b2;
  --background-color-terminvereinbart: #065f46;
  --background-color-emailsenden: #dcfce7;
  --background-color-keinenerreicht: #edebfe;
  --background-color-apnichtimhause: #d5f5f6;
  --background-color-falscherufnummer: #f3f4f6;

  --text-color-offen: #1f2937;
  --text-color-ubersprungen: #1f2937;
  --text-color-keininteresse: #9b1c1c;
  --text-color-wiedervorlage: #723b13;
  --text-color-terminvereinbart: #d1fae5;
  --text-color-emailsenden: #166534;
  --text-color-keinenerreicht: #5521b5;
  --text-color-apnichtimhause: #05505c;
  --text-color-falscherufnummer: #1f2937;

  --radius-large: 40px;
  --radius-medium: 20px;
  --radius: 12px;

  --spacing-15: 60px;
  --spacing-25: 100px;
  --spacing-150: 150px;

  --drop-shadow-nav: 0px 0px 30px rgba(0, 0, 0, 0.05);
  --drop-shadow-icon: 0px 0px 20px 0px rgba(0, 0, 0, 0.07);

  --shadow-nav: 0px 0px 30px rgba(0, 0, 0, 0.05);
  --shadow-box: 0px 5px 50px 0px rgba(0, 0, 0, 0.07);

  --background-size-80: 80%;
  --background-size-full: 100%;

  --animate-floating: floating 5000ms ease-in-out infinite;
  --animate-floating-down: floatingDown 5000ms ease-in-out infinite;

  @keyframes floating {
    0%,
    100% {
      transform: translate(0, 0px);
    }
    50% {
      transform: translate(0, -50px);
    }
  }
  @keyframes floatingDown {
    0%,
    100% {
      transform: translate(0, 0px);
    }
    50% {
      transform: translate(0, 50px);
    }
  }
}

@utility container {
  margin-inline: auto;
}

[wongjn]

You seem to be missing many semicolons. Try adding them in and see if that helps:

 /* Import statements must come first */
-@import 'tailwindcss'
-@import './fonts.css' layer(base)
-@import '../../node_modules/aos/dist/aos.css' layer(base)
-@import '../../node_modules/flickity/css/flickity.css' layer(base)
-@import '../../node_modules/swiper/swiper-bundle.css' layer(base)
-@import './marquee.css' layer(utilities)
-@import './faq.css' layer(utilities)
-@import './integration-slider.css' layer(utilities)
-@import '../../node_modules/bootstrap-icons/font/bootstrap-icons.css' layer(utilities)
-@import './sweet-alert.css' layer(utilities)
+@import 'tailwindcss';
+@import './fonts.css' layer(base);
+@import '../../node_modules/aos/dist/aos.css' layer(base);
+@import '../../node_modules/flickity/css/flickity.css' layer(base);
+@import '../../node_modules/swiper/swiper-bundle.css' layer(base);
+@import './marquee.css' layer(utilities);
+@import './faq.css' layer(utilities);
+@import './integration-slider.css' layer(utilities);
+@import '../../node_modules/bootstrap-icons/font/bootstrap-icons.css' layer(utilities);
+@import './sweet-alert.css' layer(utilities);

 /* Configuration */
-@config "../../tailwind.config.js"
+@config "../../tailwind.config.js";
 
 /* Custom variants */
-@custom-variant dark (&:is(.dark *))
+@custom-variant dark (&:is(.dark *));
 
 @theme {