Unknown utility "class-name"

For some reason, this…

// components/SidebarIcon.tsx

/** @jsx h */
import { h } from "preact";

export function SidebarIcon(props: {iconName: string}) {
  return (
    <div className="sidebar-icon">
      {props.iconName}
    </div>
  );
}

…gives me this error from TypeScript in VSCode:

Unknown utility "sidebar-icon" ts(-2020)

I have a feeling that might be caused by Twind because if I use one of its classes — everything is fine. Am I not allowed to create my own classes if I use Twind?

[lucacasonato]

This seems like something you’d want to report to the twind folks.

[synalice]

I understood the source, but not the reason of the issue.

To solve the https://github.com/denoland/fresh/issues/425, I created this file:

// config/twind.config.ts

/** @jsx h */

/** @type {import('twind').Configuration} */

It solved the issue of autocomplete not working for the Twind, but at the same time introduced the above Unknown utillity error. Deleting this config/twind.config.ts file solves the issue, but breaks autocomplete.