CSS Modules

A CSS Module is a CSS file in which all class names and animation names are scoped locally by default. This helps avoid name collisions by ensuring that styles are only applied to the component where they are defined.

Tuono supports CSS modules out of the box.

For more information, you can refer to the official CSS Modules repository.

Any CSS file ending with .module.css is considered a CSS modules file.

Given the following file:

/* ExampleComponent.module.css */
.awesome {
  color: #000;
}

.awesome-things {
  background: #fff;
}

Importing such file will return the corresponding module object:

/* ExampleComponent.tsx */
import { JSX } from 'react'

import styles from './example.module.css'

export function ExampleComponent(): JSX.Element {
  return (
    <div className={styles.awesome}>
      <div className={styles['awesome-things']}>ExampleComponent</div>
    </div>
  )
}