Slidev Styling

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

  Styled text

Common Utilities

Typography:

Small
Base
Large
Extra Large
2XL

Bold
Semibold
Italic
Underlined

Colors:

Red text
Blue text
Green background
Yellow combo

Spacing:

Padding 4
Margin 2
Horizontal/Vertical padding
Margin top 8

Layout:

  Left
  Right

  Column 1
  Column 2

Color System

Default Colors

100
500
900

Red
Orange
Yellow
Green
Blue
Purple
Pink

Custom Colors

In uno.config.ts:

import { defineConfig } from 'unocss'

export default defineConfig({
  theme: {
    colors: {
      brand: {
        DEFAULT: '#5d8392',
        light: '#8bb4c4',
        dark: '#3d5a65',
      },
      accent: '#f59e0b',
    },
  },
})

Usage:

Brand color
Light brand background
Accent color

Typography

Font Sizes

Extra small (12px)
Small (14px)
Base (16px)
Large (18px)
XL (20px)
2XL (24px)
3XL (30px)
4XL (36px)
5XL (48px)

Custom Fonts

In frontmatter:

---
fonts:
  sans: 'Inter'
  serif: 'Merriweather'
  mono: 'Fira Code'
---

In uno.config.ts:

export default defineConfig({
  theme: {
    fontFamily: {
      display: ['Inter', 'sans-serif'],
      body: ['Open Sans', 'sans-serif'],
    },
  },
})

Usage:

Display heading
Body text

Google Fonts

---
fonts:
  sans: 'Roboto'
  serif: 'Playfair Display'
  mono: 'JetBrains Mono'
  provider: 'google'
---

Global Styles

styles/index.css

/* styles/index.css */

/* Root variables */
:root {
  --color-primary: #3b82f6;
  --color-secondary: #10b981;
  --font-size-base: 16px;
}

/* Global typography */
.slidev-layout h1 {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-primary);
}

.slidev-layout h2 {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--color-secondary);
}

/* Custom utility classes */
.highlight {
  background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
  padding: 0 0.25em;
}

.shadow-brand {
  box-shadow: 0 4px 14px 0 rgba(93, 131, 146, 0.39);
}

/* Animation classes */
.fade-in {
  animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

Scoped Styles

Per-Slide Styles

Add `` at the end of a slide:

# My Styled Slide

  Special content

.custom-box {
  padding: 2rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 1rem;
  color: white;
}

h1 {
  color: #667eea;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

Scoped vs Global

Styles in `` are automatically scoped to the slide.

For global styles within a slide:

:global(.slidev-layout) {
  /* Affects all slides */
}

Layout Utilities

Flexbox

  Item 1
  Item 2

  Centered content

  Tag 1
  Tag 2

Grid

  1
  2
  3

  

Positioning

  
    Top right corner
  

  Fixed position

Custom Shortcuts

In uno.config.ts

import { defineConfig } from 'unocss'

export default defineConfig({
  shortcuts: {
    'btn': 'px-4 py-2 rounded bg-blue-500 text-white hover:bg-blue-600',
    'btn-outline': 'px-4 py-2 rounded border border-blue-500 text-blue-500 hover:bg-blue-50',
    'card': 'p-4 rounded-lg shadow-md bg-white dark:bg-gray-800',
    'section-title': 'text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4',
    'badge': 'px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800',
  },
})

Usage:

Click me
Card content
Section

Dark Mode Styling

Dark Mode Classes

  Adapts to dark mode

In Custom CSS

.my-component {
  background: #ffffff;
  color: #1a1a1a;
}

.dark .my-component {
  background: #1a1a1a;
  color: #ffffff;
}

Animations

Transition Utilities

  Scales on hover

  Color transition

Custom Animations

/* styles/index.css */
@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.animate-slide-in-left {
  animation: slideInLeft 0.5s ease-out;
}

Animation with v-motion

  Animated content

Responsive Design

Breakpoints

  Responsive text size

  Responsive grid

  Only visible on large screens

Default Breakpoints

| Prefix | Width | |--------|-------| | sm | 640px | | md | 768px | | lg | 1024px | | xl | 1280px | | 2xl | 1536px |

Common Patterns

Card Component

  Card Title
  Card content

Badge

  Active

Alert Box

  Warning message

Code Annotation

```js
const x = 1 // [!code highlight]

Important line!

## Best Practices

### 1. Use Utilities First

```markdown

  Good

2. Create Shortcuts for Repeated Patterns

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

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:

# [Slide Title]

  Content

/* Scoped styles if needed */
.custom-class {
  property: value;
}

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)

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: yoanbernabeu
• Source: yoanbernabeu/slidev-skills
• License: MIT

Install and usage instructions live in the source repository linked above.