Style Atomic Css

Start with the basic example, then compare related settings before moving to controlled, asynchronous or combined use cases.

Basic examples

Starter

Overview

Preview configuration: :columns="columns", :data="data", :pagination="false".

Colors, typography and spacing

Colors

Font Size

Spacing

Responsive layout and composition

Breakpoints

Preview configuration: :columns="columns", :data="rows", :pagination="false".

Combined

UnoCSS

Installation

pnpm add -D @cedar-design/preset-unocss unocss

Configuration

// uno.config.ts
import { defineConfig } from "unocss";
import { presetCedar } from "@cedar-design/preset-unocss";

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

Optional presetCedar({ colors, fontSize, breakpoints }); false disables a section.

Load theme variables first

import "@cedar-design/ui/dist/index.css";
// Or import a theme stylesheet containing --c-* variables

---

Tailwind CSS

Installation

pnpm add -D @cedar-design/preset-tailwindcss tailwindcss

Tailwind v3

// tailwind.config.js
import { presetCedar } from "@cedar-design/preset-tailwindcss";

export default {
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  presets: [presetCedar()],
};

Tailwind v4

// tailwind.config.js
import { presetCedar } from "@cedar-design/preset-tailwindcss";

export default {
  presets: [presetCedar()],
};

/* src/style.css */
@import "tailwindcss";
@config '../tailwind.config.js';

---

See Common patterns for all Flex/spacing/sizing/overflow/radius classes. Only utilities mapped to Cedar tokens are listed below.

Optional configuration

presetCedar({
  colors: true, // or false / partial key overrides
  fontSize: true, // false disables it; custom fontSize maps are accepted
  // Uno:
  breakpoints: true,
  // TW:
  // screens: true,
});

Custom theme mapping

colors/fontSize may override part of the defaults; omitted keys retain default mappings:

presetCedar({
  colors: {
    primary: "var(--app-color-brand)",
    danger: "var(--app-color-error)",
  },
  fontSize: {
    md: "15px",
  },
});

false disables the corresponding Cedar theme mapping. Generator-native utilities may still exist but no longer bind Cedar variables.

---

Corresponding Maple configuration

Maple's UnoCSS preset includes presetUno with an mp- prefix:

import { defineConfig } from "unocss";
import { presetMaple } from "@nio-pow/maple-preset-unocss";

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

Both Maple UnoCSS/Tailwind presets generate mp-bg-primary, mp-text-primary and mp-border mp-border-primary without unprefixed aliases.

Tailwind prefix is global; one Tailwind instance should not load Cedar/Maple presets with different prefixes simultaneously.

---

Notes

• The preset includes the framework's full atomic classes with c- prefixes, e.g. c-flex/c-p-16.
• Classes must start with c-, e.g. c-bg-primary; no unprefixed aliases.
• Choose UnoCSS or Tailwind CSS; do not enable both generators in one app.
• Cedar/Maple share theme key names. Even with different UnoCSS utility prefixes, avoid merging both themes in one config or matching colors may overwrite by preset order.