From 674a817131c2ffaad763d4ca6388c06c4bc6ef28 Mon Sep 17 00:00:00 2001
From: Marco Pasqualetti <24919330+marcalexiei@users.noreply.github.com>
Date: Thu, 6 Feb 2025 12:41:59 +0100
Subject: [PATCH] docs: add `/styles/css-modules` page (#513)

---
 .../documentation/styles/css-modules.mdx      | 45 ++++++++++++++++++-
 1 file changed, 43 insertions(+), 2 deletions(-)

diff --git a/apps/documentation/src/routes/documentation/styles/css-modules.mdx b/apps/documentation/src/routes/documentation/styles/css-modules.mdx
index d5a468f2..16308526 100644
--- a/apps/documentation/src/routes/documentation/styles/css-modules.mdx
+++ b/apps/documentation/src/routes/documentation/styles/css-modules.mdx
@@ -7,8 +7,49 @@ import MetaTags from '@/components/MetaTags'
 
 import Breadcrumbs from '@/components/Breadcrumbs'
 
-<Breadcrumbs breadcrumbs={[{ label: 'Styles' }]} />
+<Breadcrumbs breadcrumbs={[{ label: 'CSS Modules' }]} />
 
 # CSS Modules
 
-TODO
+## Overview
+
+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](https://github.com/css-modules/css-modules).
+
+## Example
+
+Any CSS file ending with `.module.css` is considered a CSS modules file.
+
+Given the following file:
+
+```css
+/* ExampleComponent.module.css */
+.awesome {
+  color: #000;
+}
+
+.awesome-things {
+  background: #fff;
+}
+```
+
+Importing such file will return the corresponding module object:
+
+```tsx
+/* 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>
+  )
+}
+```