tailwind.config.ts has no effect after upgrading to tailwindcss 4

[Tockra]

Hello,,
I upgraded my nextjs project to nextjs and after that my loading animation does not work anymore.
It was configured in the tailwind.config.ts before. But now it seems not to have a effect anymore:

import type { Config } from "tailwindcss";

const config: Config = {
  content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
  theme: {
    extend: {
      keyframes: {
        "custom-pulse": {
          "0%, 100%": { transform: "scale(1.32)" },
          "50%": { transform: "scale(1.1)" },
        },
      },
      animation: {
        "custom-pulse": "custom-pulse 1s infinite ease-in-out",
      },
    },
  },
  plugins: [],
};
export default config;

Does anybody has a tip how to fix that issue?

T

[wongjn]

Check whether your configuration file is loaded into Tailwind by checking for a @config directive in your CSS. Otherwise, you could consider porting your animation configuration to v4 configuration.