Styling in Slidev

This skill covers all styling options in Slidev, including UnoCSS utilities, custom CSS, scoped styles, and advanced styling techniques.

When to Use This Skill

• Customizing slide appearance
• Adding custom colors and typography
• Creating reusable style patterns
• Implementing animations
• Building responsive layouts

UnoCSS Basics

Slidev uses UnoCSS, an atomic CSS framework similar to Tailwind CSS.

Inline Classes

markdown
1<div class="text-xl font-bold text-blue-500">
2  Styled text
3</div>

Common Utilities

Typography:

markdown
1<span class="text-sm">Small</span>
2<span class="text-base">Base</span>
3<span class="text-lg">Large</span>
4<span class="text-xl">Extra Large</span>
5<span class="text-2xl">2XL</span>
6
7<span class="font-bold">Bold</span>
8<span class="font-semibold">Semibold</span>
9<span class="italic">Italic</span>
10<span class="underline">Underlined</span>

Colors:

markdown
1<span class="text-red-500">Red text</span>
2<span class="text-blue-600">Blue text</span>
3<span class="bg-green-100">Green background</span>
4<span class="bg-yellow-200 text-yellow-800">Yellow combo</span>

Spacing:

markdown
1<div class="p-4">Padding 4</div>
2<div class="m-2">Margin 2</div>
3<div class="px-4 py-2">Horizontal/Vertical padding</div>
4<div class="mt-8">Margin top 8</div>

Layout:

markdown
1<div class="flex items-center justify-between">
2  <span>Left</span>
3  <span>Right</span>
4</div>
5
6<div class="grid grid-cols-2 gap-4">
7  <div>Column 1</div>
8  <div>Column 2</div>
9</div>

Color System

Default Colors

markdown
1<!-- Grays -->
2<span class="text-gray-100">100</span>
3<span class="text-gray-500">500</span>
4<span class="text-gray-900">900</span>
5
6<!-- Colors -->
7<span class="text-red-500">Red</span>
8<span class="text-orange-500">Orange</span>
9<span class="text-yellow-500">Yellow</span>
10<span class="text-green-500">Green</span>
11<span class="text-blue-500">Blue</span>
12<span class="text-purple-500">Purple</span>
13<span class="text-pink-500">Pink</span>

Custom Colors

In uno.config.ts:

typescript
1import { defineConfig } from 'unocss'
2
3export default defineConfig({
4  theme: {
5    colors: {
6      brand: {
7        DEFAULT: '#5d8392',
8        light: '#8bb4c4',
9        dark: '#3d5a65',
10      },
11      accent: '#f59e0b',
12    },
13  },
14})

Usage:

markdown
1<span class="text-brand">Brand color</span>
2<span class="bg-brand-light">Light brand background</span>
3<span class="text-accent">Accent color</span>

Typography

Font Sizes

markdown
1<p class="text-xs">Extra small (12px)</p>
2<p class="text-sm">Small (14px)</p>
3<p class="text-base">Base (16px)</p>
4<p class="text-lg">Large (18px)</p>
5<p class="text-xl">XL (20px)</p>
6<p class="text-2xl">2XL (24px)</p>
7<p class="text-3xl">3XL (30px)</p>
8<p class="text-4xl">4XL (36px)</p>
9<p class="text-5xl">5XL (48px)</p>

Custom Fonts

In frontmatter:

yaml
1---
2fonts:
3  sans: 'Inter'
4  serif: 'Merriweather'
5  mono: 'Fira Code'
6---

In uno.config.ts:

typescript
1export default defineConfig({
2  theme: {
3    fontFamily: {
4      display: ['Inter', 'sans-serif'],
5      body: ['Open Sans', 'sans-serif'],
6    },
7  },
8})

Usage:

markdown
1<h1 class="font-display">Display heading</h1>
2<p class="font-body">Body text</p>

Google Fonts

yaml
1---
2fonts:
3  sans: 'Roboto'
4  serif: 'Playfair Display'
5  mono: 'JetBrains Mono'
6  provider: 'google'
7---

Global Styles

styles/index.css

css
1/* styles/index.css */
2
3/* Root variables */
4:root {
5  --color-primary: #3b82f6;
6  --color-secondary: #10b981;
7  --font-size-base: 16px;
8}
9
10/* Global typography */
11.slidev-layout h1 {
12  font-size: 2.5rem;
13  font-weight: 700;
14  color: var(--color-primary);
15}
16
17.slidev-layout h2 {
18  font-size: 1.75rem;
19  font-weight: 600;
20  color: var(--color-secondary);
21}
22
23/* Custom utility classes */
24.highlight {
25  background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
26  padding: 0 0.25em;
27}
28
29.shadow-brand {
30  box-shadow: 0 4px 14px 0 rgba(93, 131, 146, 0.39);
31}
32
33/* Animation classes */
34.fade-in {
35  animation: fadeIn 0.5s ease-in;
36}
37
38@keyframes fadeIn {
39  from { opacity: 0; }
40  to { opacity: 1; }
41}

Scoped Styles

Per-Slide Styles

Add <style> at the end of a slide:

markdown
1# My Styled Slide
2
3<div class="custom-box">
4  Special content
5</div>
6
7<style>
8.custom-box {
9  padding: 2rem;
10  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
11  border-radius: 1rem;
12  color: white;
13}
14
15h1 {
16  color: #667eea;
17  text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
18}
19</style>

Scoped vs Global

Styles in <style> are automatically scoped to the slide.

For global styles within a slide:

markdown
1<style>
2:global(.slidev-layout) {
3  /* Affects all slides */
4}
5</style>

Layout Utilities

Flexbox

markdown
1<div class="flex flex-col gap-4">
2  <div>Item 1</div>
3  <div>Item 2</div>
4</div>
5
6<div class="flex items-center justify-center h-full">
7  <p>Centered content</p>
8</div>
9
10<div class="flex flex-wrap gap-2">
11  <span class="badge">Tag 1</span>
12  <span class="badge">Tag 2</span>
13</div>

Grid

markdown
1<div class="grid grid-cols-3 gap-4">
2  <div>1</div>
3  <div>2</div>
4  <div>3</div>
5</div>
6
7<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
8  <!-- Responsive grid -->
9</div>

Positioning

markdown
1<div class="relative">
2  <div class="absolute top-0 right-0">
3    Top right corner
4  </div>
5</div>
6
7<div class="fixed bottom-4 right-4">
8  Fixed position
9</div>

Custom Shortcuts

In uno.config.ts

typescript
1import { defineConfig } from 'unocss'
2
3export default defineConfig({
4  shortcuts: {
5    'btn': 'px-4 py-2 rounded bg-blue-500 text-white hover:bg-blue-600',
6    'btn-outline': 'px-4 py-2 rounded border border-blue-500 text-blue-500 hover:bg-blue-50',
7    'card': 'p-4 rounded-lg shadow-md bg-white dark:bg-gray-800',
8    'section-title': 'text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4',
9    'badge': 'px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800',
10  },
11})

Usage:

markdown
1<button class="btn">Click me</button>
2<div class="card">Card content</div>
3<h2 class="section-title">Section</h2>

Dark Mode Styling

Dark Mode Classes

markdown
1<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white">
2  Adapts to dark mode
3</div>

In Custom CSS

css
1.my-component {
2  background: #ffffff;
3  color: #1a1a1a;
4}
5
6.dark .my-component {
7  background: #1a1a1a;
8  color: #ffffff;
9}

Animations

Transition Utilities

markdown
1<div class="transition-all duration-300 hover:scale-110">
2  Scales on hover
3</div>
4
5<div class="transition-colors duration-200 hover:bg-blue-500">
6  Color transition
7</div>

Custom Animations

css
1/* styles/index.css */
2@keyframes slideInLeft {
3  from {
4    transform: translateX(-100%);
5    opacity: 0;
6  }
7  to {
8    transform: translateX(0);
9    opacity: 1;
10  }
11}
12
13.animate-slide-in-left {
14  animation: slideInLeft 0.5s ease-out;
15}

Animation with v-motion

markdown
1<div
2  v-motion
3  :initial="{ opacity: 0, y: 50 }"
4  :enter="{ opacity: 1, y: 0, transition: { duration: 500 } }"
5>
6  Animated content
7</div>

Responsive Design

Breakpoints

markdown
1<div class="text-sm md:text-base lg:text-lg">
2  Responsive text size
3</div>
4
5<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
6  Responsive grid
7</div>
8
9<div class="hidden lg:block">
10  Only visible on large screens
11</div>

Default Breakpoints

Common Patterns

Card Component

markdown
1<div class="p-6 rounded-xl bg-white dark:bg-gray-800 shadow-lg">
2  <h3 class="text-lg font-semibold mb-2">Card Title</h3>
3  <p class="text-gray-600 dark:text-gray-300">Card content</p>
4</div>

Badge

markdown
1<span class="px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800">
2  Active
3</span>

Alert Box

markdown
1<div class="p-4 rounded-lg bg-yellow-50 border-l-4 border-yellow-400">
2  <p class="text-yellow-700">Warning message</p>
3</div>

Code Annotation

markdown
1<div class="relative">
2
3```js
4const x = 1 // [!code highlight]

Best Practices

1. Use Utilities First

markdown
1<!-- Prefer utilities -->
2<div class="p-4 bg-blue-500 text-white rounded">
3  Good
4</div>
5
6<!-- Custom CSS only when necessary -->

2. Create Shortcuts for Repeated Patterns

typescript
1shortcuts: {
2  'btn-primary': 'px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600',
3}

3. Maintain Consistency

Use the same spacing scale:

• gap-4 everywhere, not mixing gap-3 and gap-5

4. Support Dark Mode

Always provide dark mode variants for custom styles.

5. Test Export

Some CSS features don't export well to PDF:

• Complex gradients
• Some filters
• Animations (become static)

Output Format

When styling slides:

markdown
1# [Slide Title]
2
3<div class="[utility classes]">
4  Content
5</div>
6
7<style>
8/* Scoped styles if needed */
9.custom-class {
10  property: value;
11}
12</style>

STYLE DECISIONS:

• Colors: [primary, secondary]
• Typography: [font choices]
• Spacing: [consistent scale]
• Custom shortcuts: [list]

FILES MODIFIED:

• uno.config.ts (shortcuts, theme)
• styles/index.css (global styles)