From TailwindCSS v4, a new CSS-first configuration was introduced, so tailwind.config.js is no longer needed and can be deleted.

• How to install TailwindCSS v4 with Astro

So your new configuration looks something like this: global.css

@import "tailwindcss";

@source ./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue};

@theme {
  /* ... */
}

The @config was created so that anyone migrating from v3 to v4 would have the option to get their app running quickly with minimal changes, but many breaking changes have occurred in the meantime, which you should review:

• Upgrade guide
• Theme variables (configuration)
• What's breaking changes from v4?
• Tailwind CSS v4: more packages and new Vite support
• How to switch to a CSS-first configuration in Tailwind CSS v4 and above

Other related:

• How to use custom color themes in TailwindCSS v4
• How to override theme variables in TailwindCSS v4 - @theme vs @layer theme vs :root
• Should I use @theme or @theme inline?
• When should I use * and when should I use :root, :host as the parent selector?