slidev-styling

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Styling in Slidev

Slidev中的样式设置

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

本技能覆盖Slidev中所有样式配置选项，包括UnoCSS工具类、自定义CSS、作用域样式以及高级样式技巧。

When to Use This Skill

何时使用这项技能

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

自定义幻灯片外观
添加自定义颜色与排版
创建可复用的样式模式
实现动画效果
搭建响应式布局

UnoCSS Basics

UnoCSS基础

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

Slidev使用UnoCSS，这是一款类似Tailwind CSS的原子化CSS框架。

Inline Classes

行内类

markdown

<div class="text-xl font-bold text-blue-500">
  Styled text
</div>

markdown

<div class="text-xl font-bold text-blue-500">
  Styled text
</div>

Common Utilities

常用工具类

Typography:

markdown

<span class="text-sm">Small</span>
<span class="text-base">Base</span>
<span class="text-lg">Large</span>
<span class="text-xl">Extra Large</span>
<span class="text-2xl">2XL</span>

<span class="font-bold">Bold</span>
<span class="font-semibold">Semibold</span>
<span class="italic">Italic</span>
<span class="underline">Underlined</span>

Colors:

markdown

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

Spacing:

markdown

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

Layout:

markdown

<div class="flex items-center justify-between">
  <span>Left</span>
  <span>Right</span>
</div>

<div class="grid grid-cols-2 gap-4">
  <div>Column 1</div>
  <div>Column 2</div>
</div>

排版:

markdown

<span class="text-sm">Small</span>
<span class="text-base">Base</span>
<span class="text-lg">Large</span>
<span class="text-xl">Extra Large</span>
<span class="text-2xl">2XL</span>

<span class="font-bold">Bold</span>
<span class="font-semibold">Semibold</span>
<span class="italic">Italic</span>
<span class="underline">Underlined</span>

颜色:

markdown

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

间距:

markdown

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

布局:

markdown

<div class="flex items-center justify-between">
  <span>Left</span>
  <span>Right</span>
</div>

<div class="grid grid-cols-2 gap-4">
  <div>Column 1</div>
  <div>Column 2</div>
</div>

Color System

色彩系统

Default Colors

默认颜色

markdown

<!-- Grays -->
<span class="text-gray-100">100</span>
<span class="text-gray-500">500</span>
<span class="text-gray-900">900</span>

<!-- Colors -->
<span class="text-red-500">Red</span>
<span class="text-orange-500">Orange</span>
<span class="text-yellow-500">Yellow</span>
<span class="text-green-500">Green</span>
<span class="text-blue-500">Blue</span>
<span class="text-purple-500">Purple</span>
<span class="text-pink-500">Pink</span>

markdown

<!-- Grays -->
<span class="text-gray-100">100</span>
<span class="text-gray-500">500</span>
<span class="text-gray-900">900</span>

<!-- Colors -->
<span class="text-red-500">Red</span>
<span class="text-orange-500">Orange</span>
<span class="text-yellow-500">Yellow</span>
<span class="text-green-500">Green</span>
<span class="text-blue-500">Blue</span>
<span class="text-purple-500">Purple</span>
<span class="text-pink-500">Pink</span>

Custom Colors

自定义颜色

uno.config.ts

typescript

import { defineConfig } from 'unocss'

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

Usage:

markdown

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

在

uno.config.ts

中配置：

typescript

import { defineConfig } from 'unocss'

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

使用方式：

markdown

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

Typography

排版

Font Sizes

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

markdown

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

Custom Fonts

自定义字体

In frontmatter:

yaml

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

uno.config.ts

typescript

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

Usage:

markdown

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

在前置元数据中配置：

yaml

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

在

uno.config.ts

中配置：

typescript

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

使用方式：

markdown

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

Google Fonts

yaml

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

yaml

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

Global Styles

全局样式

styles/index.css

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; }
}

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

<style>

at the end of a slide:

markdown

undefined

在幻灯片末尾添加

<style>

标签：

markdown

undefined

My Styled Slide

<div class="custom-box"> Special content </div> <style> .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); } </style>

undefined

undefined

Scoped vs Global

作用域样式 vs 全局样式

Styles in

<style>

are automatically scoped to the slide.

For global styles within a slide:

markdown

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

<style>

标签内的样式默认仅作用于当前幻灯片。

如果需要在单幻灯片内定义全局样式：

markdown

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

Layout Utilities

布局工具类

Flexbox

markdown

<div class="flex flex-col gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<div class="flex items-center justify-center h-full">
  <p>Centered content</p>
</div>

<div class="flex flex-wrap gap-2">
  <span class="badge">Tag 1</span>
  <span class="badge">Tag 2</span>
</div>

markdown

<div class="flex flex-col gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<div class="flex items-center justify-center h-full">
  <p>Centered content</p>
</div>

<div class="flex flex-wrap gap-2">
  <span class="badge">Tag 1</span>
  <span class="badge">Tag 2</span>
</div>

Grid

markdown

<div class="grid grid-cols-3 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
  <!-- Responsive grid -->
</div>

markdown

<div class="grid grid-cols-3 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
  <!-- Responsive grid -->
</div>

Positioning

定位

markdown

<div class="relative">
  <div class="absolute top-0 right-0">
    Top right corner
  </div>
</div>

<div class="fixed bottom-4 right-4">
  Fixed position
</div>

markdown

<div class="relative">
  <div class="absolute top-0 right-0">
    Top right corner
  </div>
</div>

<div class="fixed bottom-4 right-4">
  Fixed position
</div>

Custom Shortcuts

自定义快捷方式

In uno.config.ts

在uno.config.ts中配置

typescript

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:

markdown

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

typescript

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',
  },
})

使用方式：

markdown

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

Dark Mode Styling

深色模式样式设置

Dark Mode Classes

深色模式类

markdown

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

markdown

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

In Custom CSS

自定义CSS中配置

css

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

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

css

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

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

Animations

动画

Transition Utilities

过渡工具类

markdown

<div class="transition-all duration-300 hover:scale-110">
  Scales on hover
</div>

<div class="transition-colors duration-200 hover:bg-blue-500">
  Color transition
</div>

markdown

<div class="transition-all duration-300 hover:scale-110">
  Scales on hover
</div>

<div class="transition-colors duration-200 hover:bg-blue-500">
  Color transition
</div>

Custom Animations

自定义动画

css

/* 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;
}

css

/* 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

使用v-motion实现动画

markdown

<div
  v-motion
  :initial="{ opacity: 0, y: 50 }"
  :enter="{ opacity: 1, y: 0, transition: { duration: 500 } }"
>
  Animated content
</div>

markdown

<div
  v-motion
  :initial="{ opacity: 0, y: 50 }"
  :enter="{ opacity: 1, y: 0, transition: { duration: 500 } }"
>
  Animated content
</div>

Responsive Design

响应式设计

Breakpoints

断点

markdown

<div class="text-sm md:text-base lg:text-lg">
  Responsive text size
</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  Responsive grid
</div>

<div class="hidden lg:block">
  Only visible on large screens
</div>

markdown

<div class="text-sm md:text-base lg:text-lg">
  Responsive text size
</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  Responsive grid
</div>

<div class="hidden lg:block">
  Only visible on large screens
</div>

Default Breakpoints

默认断点

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

前缀	宽度
`sm`	640px
`md`	768px
`lg`	1024px
`xl`	1280px
`2xl`	1536px

Common Patterns

常用模式

Card Component

卡片组件

markdown

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

markdown

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

Badge

徽章

markdown

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

markdown

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

Alert Box

警告框

markdown

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

markdown

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

Code Annotation

代码标注

markdown

<div class="relative">

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

<div class="absolute right-4 top-4 text-xs text-gray-500"> Important line! </div> </div> ```

markdown

<div class="relative">

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

<div class="absolute right-4 top-4 text-xs text-gray-500"> Important line! </div> </div> ```

Best Practices

最佳实践

1. Use Utilities First

1. 优先使用工具类

markdown

<!-- Prefer utilities -->
<div class="p-4 bg-blue-500 text-white rounded">
  Good
</div>

<!-- Custom CSS only when necessary -->

markdown

<!-- Prefer utilities -->
<div class="p-4 bg-blue-500 text-white rounded">
  Good
</div>

<!-- Custom CSS only when necessary -->

2. Create Shortcuts for Repeated Patterns

2. 为重复使用的模式创建快捷方式

typescript

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

typescript

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

3. Maintain Consistency

3. 保持一致性

Use the same spacing scale:

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

使用统一的间距规格：

所有地方统一使用
```
gap-4
```
，不要混合使用
```
gap-3
```
和
```
gap-5
```

4. Support Dark Mode

4. 支持深色模式

Always provide dark mode variants for custom styles.

自定义样式始终要提供深色模式变体。

5. Test Export

5. 测试导出效果

Some CSS features don't export well to PDF:

Complex gradients
Some filters
Animations (become static)

部分CSS特性导出为PDF时可能存在兼容问题：

复杂渐变
部分滤镜
动画（导出后会变为静态）

Output Format

输出格式

When styling slides:

markdown

undefined

设置幻灯片样式时的参考结构：

markdown

undefined

[Slide Title]

<div class="[utility classes]"> Content </div> <style> /* Scoped styles if needed */ .custom-class { property: value; } </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)

<div class="[utility classes]"> Content </div> <style> /* Scoped styles if needed */ .custom-class { property: value; } </style>


**样式决策:**
- 颜色: [主色, 辅色]
- 排版: [字体选择]
- 间距: [统一规格]
- 自定义快捷方式: [列表]

**修改的文件:**
- uno.config.ts (快捷方式、主题配置)
- styles/index.css (全局样式)

slidev-styling

Original

Translation

Styling in Slidev

Slidev中的样式设置

When to Use This Skill

何时使用这项技能

UnoCSS Basics

UnoCSS基础

Inline Classes

行内类

Common Utilities

常用工具类

Color System

色彩系统

Default Colors

默认颜色

Custom Colors

自定义颜色

Typography

排版

Font Sizes

字体大小

Custom Fonts

自定义字体

Google Fonts

Google Fonts

Global Styles

全局样式

styles/index.css

styles/index.css

Scoped Styles

作用域样式

Per-Slide Styles

单幻灯片样式

My Styled Slide

My Styled Slide

Scoped vs Global

作用域样式 vs 全局样式

Layout Utilities

布局工具类

Flexbox

Flexbox

Grid

Grid

Positioning

定位

Custom Shortcuts

自定义快捷方式

In uno.config.ts

在uno.config.ts中配置

Dark Mode Styling

深色模式样式设置

Dark Mode Classes

深色模式类

In Custom CSS

自定义CSS中配置

Animations

动画

Transition Utilities

过渡工具类

Custom Animations

自定义动画

Animation with v-motion

使用v-motion实现动画

Responsive Design

响应式设计

Breakpoints

断点

Default Breakpoints

默认断点

Common Patterns

常用模式

Card Component

卡片组件

Badge

徽章

Alert Box

警告框

Code Annotation