@import must precede all other statements (besides @charset or empty @layer)

The @import 'tailwindcss'; actually contains some layer declarations. Therefore, you need to place the fonts and other imports before it, like this:

@import url("https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap");
@import "tailwindcss";

The code will look like this after resolving the TailwindCSS import:

• Base styles: Preflight - TailwindCSS v4 Docs

@import url("https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap");
@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css" layer(utilities);

Then, the appropriate TailwindCSS styles will be placed under the corresponding @layer, replacing the three TailwindCSS imports.