# Custom CSS

```ts
theme: { customCss: "./styles.css" }
```

```css title="styles.css"
.slide-layout-section h1 {
  letter-spacing: 0.02em;
}

.metric-value {
  font-size: 3.5rem;
  font-weight: 800;
  color: hsl(var(--primary));
}
```

Available variables: `--primary`, `--accent`, `--background`, `--card`, `--border`, `--muted` (HSL
triplets, use `hsl(var(--primary))`), `--radius`, `--font-sans`, `--font-mono`, `--font-heading`,
`--slide-padding`. The file is plain CSS, loaded after the theme and the CSS modules of your
components, so its rules win. Tailwind utility classes and `@apply` are not compiled: write the
declarations, or give a component its own `.module.css` (see
[Mantine and CSS modules](/theme/mantine)).

Useful selectors: `.slide`, `.slide-layout-<layout>`, `.slide-body`, `.slide-card`, `.slide-grid`,
`.slide-footer`, `.slide-progress`.