Tailwind V3 causing TypeError: Cannot read property '500' of undefined

Question

I recently tried to upgrade my project to tailwind css and I'm getting this error

this is my tailwind config

 module.exports = {
      mode: "jit",
      purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
      darkMode: "class", // or 'media' or 'class'
      theme: {
        extend: {
          colors: {
            secondaryDark: "#171A1A",
            primaryDark: "#090A0A",
            neonOrange: "#FF9933",
            redditRed: "#FF5700",
            cardGradientPrimary: "#ff930f",
            cardGradientSecondary: "#fff95b",
          },
        },
      },
      variants: {
        extend: {},
      },
      plugins: [require("@tailwindcss/forms")],
    };

Answer 1

I have the same issue after upgrade to tailwind v3 and fixed it by update @tailwindcss/forms to 0.4.0

Answer 2

try this :

npm install -D @tailwindcss/forms@next

to update the plugins @tailwindcss/forms