config-unocss.md

Configure UnoCSS

UnoCSS is now the default CSS framework for Slidev since v0.42.0. UnoCSS is an fast atomic CSS engine that has full flexibility and extensibility.

By default, Slidev enables the following presets out-of-box:

• @unocss/preset-uno - Tailwind / Windi CSS compatible utilities
• @unocss/preset-attributify - Attributify mode
• @unocss/preset-icons - Use any icons as class
• @unocss/preset-web-fonts - Use web fonts at ease
• @unocss/transformer-directives - Use @apply in CSS

You can therefore style your content the way you want. For example:

<div class="grid pt-4 gap-4 grid-cols-[100px,1fr]">

### Name

- Item 1
- Item 2

</div>

Configurations

You can create uno.config.ts under the root of your project to extend the builtin configurations

import { defineConfig } from 'unocss'

export default defineConfig({
  shortcuts: {
    // custom the default background
    'bg-main': 'bg-white text-[#181818] dark:(bg-[#121212] text-[#ddd])',
  },
  // ...
})

Learn more about UnoCSS configurations