How to get VSCode to suggest / autocomplete the React className, given my custom classes on a ?

I have a stylesheet with a bunch of classes. How can I get it to autocomplete in VSCode so that it autocompletes the className attribute on any div or native HTML element? Right now it’s not doing anything.

I have styles defined in styles/base.css like this:

.border-solid {
  border-style: solid;
}

.border-dotted {
  border-style: dotted;
}

.border-width-1 {
  border-width: 1px;
}

.border-width-2 {
  border-width: 2px;
}

.border-width-4 {
  border-width: 4px;
}

I am in a Next.js project with VSCode settings.json like this:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "eslint.format.enable": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript", "typescript"],
  "eslint.nodePath": "./node_modules/eslint",
  "emmet.showExpandedAbbreviation": "never"
}

Is there any possible way to wire it up so it can somehow pick up my class names and autocomplete them? If I need to duplicate my class names and put them somewhere else to get autocomplete working, I am fine with that too.

If it requires a lot of work (i.e. too much for an SO answer), if you could outline the key things that I would have to do that would be great.

Ideally it would show me a TypeScript error if I use an incorrect or undefined class name.