Configure UnoCSS

环境： node

此配置仅在 Node.js 环境下运行。你可以访问 Node.js 的相关 API 了解更多。

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

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