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 { presetVinicunca } from '@vinicunca/unocss-preset';
import { defineConfig } from 'unocss';

export default defineConfig({
  presets: [
    presetVinicunca({
      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