what am i doing wrong with @plugin?

[bobbymannino]

I have a sveltekit project with vite and tailwind set up, everything works as it should up until creating a plugin. My plugin is to havegrid-area: <name> be available (surprised its not by default) and this is what i came up with:

// grid-area-plugin.js
import plugin from "tailwindcss/plugin";

export default plugin(({ theme, matchUtilities }) =>
  matchUtilities(
    {
      "grid-area": (value) => ({
        "grid-area": value,
      }),
    },
    {
      values: theme("gridArea") || {},
      type: ["any", "string"],
    },
  ),
);

i looked into @utility grid-area-* but that only works with numbers so it doesnt work, and i do not want to have fixed grid area names, i work with lots of names coming up and changing and it would be nice for me to have.

in my css file i have this:

/** app.css */
@import "tailwindcss";
@plugin "grid-area-plugin.js"

The error i then get is this:

Can't resolve 'grid-area-plugin.js" @them' in '/Users/bobbymannino/Code/folder/src'

They are in the same folder so no need for ../ or ./ but it is the same issue with ./. What am i doing wrong?