unocss-preset-marumaru

A preset for UniApp, mainly for rounded shapes.

Work in progress

This preset is still in development, and some styles may not be applied correctly.

Installation

yarn add -D unocss-preset-marumaru

npm i --save-dev unocss-preset-marumaru

Usage

Import the preset in your uno.config.* file.

You can see the UnoCSS documentation for more information.

// unocss.config.ts
import { defineConfig } from 'unocss'
import { presetMarumaru } from 'unocss-preset-marumaru'

export default defineConfig({
  presets: [
    presetMarumaru(),
  ],
})

Classes

See our documentation for all classes and demos.

Borders

Use br-<number> to specify the border-radius.

You can also use some other representations such as 8px, 1rem or even sm / md just like rounded-series that provided by the preset-tailwind.

Use t / top, r / right, b / bottom or l / left, to specify the side for setting border-radius.

You can also specify the corner like tl (short for top-left) or br (short for bottom-right), et cetera.

Combinations are also supported.

Buttons

Use btn to style a button.

Specify the size for a button with xs or lg, et cetera.

Circles

circle is a shortcut to create a circle or a dot quickly.

Flex

Use flex series to specify how your elements arranged in just one class.

Classes can be flex-{x}-{y} or flex-col-{x}-{y} while x can be justify and y can be items series.

For example, flex-between-end is a shortcut of flex justify-between items-end. flex-center is a shortcut of flex justify-center items-center.