Skip to content

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:

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

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

html
<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

ts
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

Released under the MIT License.