npx @tailwindcss/upgrade broke global css , please help

[SirNiksALot]

What version of Tailwind CSS are you using?

v4.1.4

What build tool (or framework if it abstracts the build tool) are you using?

Next.js 15.2.4,

What version of Node.js are you using?

node: '22.14.0'

What browser are you using?

Brave

What operating system are you using?

Windows

Describe your issue

Just upgraded from tailwind v3 to v4 using npx @tailwindcss/upgrade and now im getting the following error while compiling node modules :

 ⨯ ./app/globals.css
Error evaluating Node.js code
Error: `@utility` cannot be nested.
    [at C:\Users\nikhi\Desktop\our_project\next_app\node_modules\tailwindcss\dist\lib.js:32:2479]
    [at z (C:\Users\nikhi\Desktop\our_project\next_app\node_modules\tailwindcss\dist\lib.js:5:1655)]
    [at z (C:\Users\nikhi\Desktop\our_project\next_app\node_modules\tailwindcss\dist\lib.js:5:1573)]
    [at z (C:\Users\nikhi\Desktop\our_project\next_app\node_modules\tailwindcss\dist\lib.js:5:1938)]
    [at z (C:\Users\nikhi\Desktop\our_project\next_app\node_modules\tailwindcss\dist\lib.js:5:1573)]
    [at z (C:\Users\nikhi\Desktop\our_project\next_app\node_modules\tailwindcss\dist\lib.js:5:1573)]
    [at si (C:\Users\nikhi\Desktop\our_project\next_app\node_modules\tailwindcss\dist\lib.js:32:1933)]
    [at async ui (C:\Users\nikhi\Desktop\our_project\next_app\node_modules\tailwindcss\dist\lib.js:36:1079)]
    [at async Cr (C:\Users\nikhi\Desktop\our_project\next_app\node_modules\@tailwindcss\node\dist\index.js:12:3305)]
    [at async $ (C:\Users\nikhi\Desktop\our_project\next_app\node_modules\@tailwindcss\postcss\dist\index.js:10:3320)]


 ○ Compiling /_error ...
 ✓ Compiled /_error in 1061ms
Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.       
    at ShadowPortal (C:\Users\nikhi\Desktop\our_project\next_app\node_modules\next\src\client\components\react-dev-overlay\ui\components\shadow-portal.tsx:5:32)
    at DevOverlay (C:\Users\nikhi\Desktop\our_project\next_app\node_modules\next\src\client\components\react-dev-overlay\ui\dev-overlay.tsx:14:3)
    at ReactDevOverlay (C:\Users\nikhi\Desktop\our_project\next_app\node_modules\next\src\server\dev\next-dev-server.ts:82:10)      
    at div
    at Body (C:\Users\nikhi\Desktop\our_project\next_app\node_modules\next\src\server\render.tsx:1263:19)
Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.       
    at ShadowPortal (C:\Users\nikhi\Desktop\our_project\next_app\node_modules\next\src\client\components\react-dev-overlay\ui\components\shadow-portal.tsx:5:32)
    at DevOverlay (C:\Users\nikhi\Desktop\our_project\next_app\node_modules\next\src\client\components\react-dev-overlay\ui\dev-overlay.tsx:14:3)
    at ReactDevOverlay (C:\Users\nikhi\Desktop\our_project\next_app\node_modules\next\src\server\dev\next-dev-server.ts:82:10)      
    at div
    at Body (C:\Users\nikhi\Desktop\our_project\next_app\node_modules\next\src\server\render.tsx:1263:19)

global css

@import 'tw-animate-css' layer(base);

@import 'tailwindcss';

@custom-variant dark (&:is(.dark *));

@theme {
  --font-*: initial;
  --font-flex: RobotoFlex;

  --color-grellow: #cce35a;
  --color-report_inner: #272727;
  --color-report_outer: #313131;
  --color-report_comment_font: #8e8e8e;
  --color-progress_red: #ed5555;
  --color-progress_orange: #c37d61;
  --color-progress_yellow: #c3b961;
  --color-progress_green: #61c36d;

  --animate-shiny-text: shiny-text 5s infinite;
  --animate-line-shadow: line-shadow 10s linear infinite;

  @keyframes shiny-text {
    0%,
    90%,
    100% {
      background-position: calc(-100% - var(--shiny-width)) 0;
    }
    30%,
    60% {
      background-position: calc(100% + var(--shiny-width)) 0;
    }
  }
  @keyframes line-shadow {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: 100% -100%;
    }
  }
}

/*
  The default border color has changed to `currentcolor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentcolor);
  }
}

@layer base {
    @font-face {
      font-family: 'RobotoFlex';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url(../fonts//RobotoFlex-VariableFont_GRAD\,XOPQ\,XTRA\,YOPQ\,YTAS\,YTDE\,YTFI\,YTLC\,YTUC\,opsz\,slnt\,wdth\,wght.ttf) format('truetype');
    }
  }

[wongjn]

I think it is due to the line:

@import 'tw-animate-css' layer(base);

Try removing the layer(base):

@import 'tw-animate-css';

[SirNiksALot]

Okay this worked ! Thanks :)