Skip to content

Interactive Documentation

UnoCSS comes up with a Playground and an Interactive Documentation.

This tutorial will guide you how to set it up and take advantage of them.

Playground

There is a playground that has already been set up for you to play with.

You can access it here .

Setup

To set up the interactive documentation, follow these steps:

  • Copy the below code
ts
import { defineConfig, presetUno } from 'unocss'
import { presetAnimations } from 'unocss-preset-animations'


export default defineConfig({
  presets: [
    presetUno(),
    presetAnimations({
      fillMode: 'both', // or whatever options you want
    }),
  ],
})
  • Head to the official Interactive Documentation
  • Click the icon in the top-right corner
  • Paste the above code into the editor and click OK
  • Enjoy 🥰

Released under the MIT License.