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

import { defineConfig, presetWind3 } from 'unocss'
import { presetAnimations } from 'unocss-preset-animations'


export default defineConfig({
  presets: [
    presetWind3(),
    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 🥰