Hi, thanks for the help!

I am trying to understand how CSS modules work. I would like to be able to use css modules for each component, .e.g. components/componentName, and for each component folder have:

index.tsx and index.module.css, however, no CSS properties are shown when the class is added (the class is applied successfully with the hash). It does, however, work correctly when I use css modules in the /app folder, for example page.module.css and page.tsx.

index.tsx:

js import { ReactNode } from 'react';
import styles from './index.module.css';

function SliceHeading({ children, isPageHeadline }: { children: ReactNode, isPageHeadline: boolean }) {
    const HeadingTag = isPageHeadline ? 'h1' : 'h2';
    console.log(styles.type);
    return (
        <HeadingTag className={styles.type}>
            {children}
        </HeadingTag>
    );
}

export default SliceHeading;

index.module.css:

css .type {
  font-size: 1rem;
  background-color: green;
}

What am I missing here?