@unocss/preset-uno

Utility Classes

This feature allows you to use pre-defined utility classes to style your HTML elements. In this example, the `p-4` class adds padding, `bg-blue-500` sets the background color, and `text-white` sets the text color.

<div class="p-4 bg-blue-500 text-white">Hello, World!</div>

Responsive Design

UnoCSS provides responsive utility classes that allow you to apply different styles at different breakpoints. In this example, the padding changes based on the screen size: `p-4` for small screens, `md:p-8` for medium screens, and `lg:p-12` for large screens.

<div class="p-4 md:p-8 lg:p-12">Responsive Padding</div>

Custom Themes

You can customize the default theme by defining your own colors, spacing, and other design tokens. This example shows how to configure a custom theme with primary and secondary colors.

import { defineConfig } from 'unocss';
import presetUno from '@unocss/preset-uno';

export default defineConfig({
  presets: [
    presetUno(),
  ],
  theme: {
    colors: {
      primary: '#1da1f2',
      secondary: '#14171a',
    },
  },
});