Configure UnoCSS #

UnoCSS is the default CSS framework for Kolibry. UnoCSS is an fast atomic CSS engine that has full flexibility and extensibility.

By default, Kolibry 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

Kolibry 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] dark:text-[#ddd]',
  },
  // ...
})

Learn more about UnoCSS configurations