Configure UnoCSS

Environment: node

This setup function will only run on Node.js environment, you can have access to Node's API.

UnoCSS is now the default CSS framework for Slidev since v0.42.0. UnoCSS is a fast atomic CSS engine that has full flexibility and extensibility. Most of the Tailwind CSS classes are supported out-of-box, and you can also extend it with your own configurations.

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

Slidev also adds shortcuts as can be seen in its source code.

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