UnoCSS Utilities

Basic Utilities

UnoCSS provides atomic CSS utilities that can be composed to build any design. Here are the core utility categories:

Colors

Control text, background, and border colors

HTML

<div class="text-blue-500">Blue text</div>
<div class="bg-red-200">Red background</div>
<div class="border-green-600">Green border</div>

React

function ColorExample() {
	return (
		<>
			<div className="text-blue-500">Blue text</div>
			<div className="bg-red-200">Red background</div>
			<div className="border-green-600">Green border</div>
		</>
	);
}

Vue

<template>
	<div class="text-blue-500">Blue text</div>
	<div class="bg-red-200">Red background</div>
	<div class="border-green-600">Green border</div>
</template>

Spacing

Control margin, padding and spacing between elements

HTML

<div class="m-4">Margin on all sides</div>
<div class="px-6">Horizontal padding</div>
<div class="gap-2">Gap between grid/flex items</div>

React

function SpacingExample() {
	return (
		<>
			<div className="m-4">Margin on all sides</div>
			<div className="px-6">Horizontal padding</div>
			<div className="gap-2">Gap between grid/flex items</div>
		</>
	);
}

Vue

<template>
	<div class="m-4">Margin on all sides</div>
	<div class="px-6">Horizontal padding</div>
	<div class="gap-2">Gap between grid/flex items</div>
</template>

Typography

Control text size, weight, alignment and more

HTML

<p class="text-sm font-bold">Small bold text</p>
<p class="text-center italic">Centered italic text</p>
<p class="text-2xl tracking-wide">Large spaced text</p>

React

function TypographyExample() {
	return (
		<>
			<p className="text-sm font-bold">Small bold text</p>
			<p className="text-center italic">Centered italic text</p>
			<p className="text-2xl tracking-wide">Large spaced text</p>
		</>
	);
}

Vue

<template>
	<p class="text-sm font-bold">Small bold text</p>
	<p class="text-center italic">Centered italic text</p>
	<p class="text-2xl tracking-wide">Large spaced text</p>
</template>

Layout

Control display, position and box model properties

HTML

<div class="flex justify-between">
	<div>Item 1</div>
	<div>Item 2</div>
</div>

<div class="grid grid-cols-3 gap-4">
	<div>Grid item</div>
	<!-- More items -->
</div>

React

function LayoutExample() {
	return (
		<>
			<div className="flex justify-between">
				<div>Item 1</div>
				<div>Item 2</div>
			</div>

			<div className="grid grid-cols-3 gap-4">
				<div>Grid item</div>
				{/* More items */}
			</div>
		</>
	);
}

Vue

<template>
	<div class="flex justify-between">
		<div>Item 1</div>
		<div>Item 2</div>
	</div>

	<div class="grid grid-cols-3 gap-4">
		<div>Grid item</div>
		<!-- More items -->
	</div>
</template>

Responsive Design

Utilities can be prefixed for responsive breakpoints

HTML

<div class="sm:hidden md:block lg:flex">
	<!-- Responsive layout -->
</div>

React

function ResponsiveExample() {
	return (
		<div className="sm:hidden md:block lg:flex">
			{/* Responsive layout */}
		</div>
	);
}

Vue

<template>
	<div class="sm:hidden md:block lg:flex">
		<!-- Responsive layout -->
	</div>
</template>

Custom Utilities

You can define custom utilities in your UnoCSS config:

// uno.config.ts
export default defineConfig({
	rules: [
		["custom-util", { color: "#123456" }],
		[/^custom-(.+)$/, ([, name]) => ({ content: name })],
	],
});

Best Practices

Some recommended practices when using UnoCSS utilities:

• Group related utilities together
• Use meaningful class combinations
• Leverage shortcuts for common patterns
• Consider extracting components for repeated patterns