Advanced

Custom CSS

TypeScriptTypeScript
theme: { customCss: "./styles.css" }
CSSstyles.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).

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