CSS Modules Styling

The framework docs app uses CSS Modules as the default styling model because they keep ownership local and hydration-safe.

Minimal working example

import styles from "./tasks.module.css";

export default function TasksPage() {
  return (
    <section className={styles.panel}>
      <h1 className={styles.title}>Task Tracker</h1>
    </section>
  );
}

.panel {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: white;
}

.title {
  font-size: 2rem;
}

Bridging framework-emitted markdown classes

Markdown routes emit structural classes like .docs-hero and .docs-content-body. Style them from a local module with a scoped global bridge:

.content :global(.docs-hero) h1 {
  letter-spacing: -0.03em;
}

.content :global(.docs-content-body) h2 {
  scroll-margin-top: 7rem;
}

Rules

• Put component and route styles next to the component or route.
• Keep global CSS for real global concerns only.
• Scope :global(...) bridges under a local class to avoid bleed.

Related APIs

• Global CSS
• Public Assets

Next step

Review Global CSS for the small set of styles that should stay global.