@unocss/preset-mini

Responsive Design

This feature allows you to apply different styles based on the screen size. In this example, the background color changes from blue on medium screens to green on large screens.

```html
<div class="md:bg-blue-500 lg:bg-green-500">
  Responsive Background Color
</div>
```

Flexbox Utilities

Flexbox utilities help you to easily create flexible and responsive layouts. This example centers the content both horizontally and vertically.

```html
<div class="flex justify-center items-center">
  Centered Content
</div>
```

Spacing Utilities

Spacing utilities allow you to add padding and margin to elements. In this example, the box has padding of 4 units and margin of 2 units.

```html
<div class="p-4 m-2">
  Padded and Margined Box
</div>
```

Typography Utilities

Typography utilities help you to style text elements. This example makes the text large and bold.

```html
<p class="text-lg font-bold">
  Large Bold Text
</p>
```

Color Utilities

Color utilities allow you to easily apply colors to text and backgrounds. This example sets the text color to red and the background color to yellow.

```html
<div class="text-red-500 bg-yellow-200">
  Colored Text and Background
</div>
```