Custom UnoCSS Configuration for Presentation Slides

You need to create a presentation that requires custom CSS utilities for consistent styling across slides. Specifically, you need to configure custom shortcuts and theme colors that will be used throughout the presentation.

Your task is to set up UnoCSS configuration to provide:

1. A custom shortcut called gradient-bg that applies a gradient background
2. Custom theme colors: brand-primary (#3B82F6) and brand-secondary (#10B981)
3. Custom spacing values: section (2.5rem) and content (1.75rem)

The configuration should allow you to use these utilities in your slides, for example:

• class="gradient-bg" to apply the gradient background
• class="text-brand-primary" to use the primary brand color
• class="p-section" to apply section padding

Requirements

1. Create the appropriate setup file to configure UnoCSS
2. Define the custom shortcut for gradient-bg that creates a gradient from #667eea to #764ba2
3. Extend the theme with the custom colors and spacing values
4. Ensure the configuration is properly exported

Test Cases

• The gradient-bg shortcut applies both a gradient background and white text color @test
• The custom theme color brand-primary is accessible via UnoCSS utilities @test
• The custom spacing value section (2.5rem) is available for padding/margin utilities @test

Implementation

@generates

API

import type { UserConfig } from 'unocss'

export default function (): UserConfig;

Dependencies { .dependencies }

@slidev/cli { .dependency }

Provides the Slidev presentation framework with UnoCSS integration.

@satisfied-by

unocss { .dependency }

Provides utility-first CSS framework and configuration types.

@satisfied-by