Configuration

Configure Yumma CSS for your project.

Install the CLI

Yumma CSS includes the Yumma CLI, a powerful tool for generating production-ready styles.

pnpm add yummacss -D

Set up

Initialize a configuration file in your project.

pnpm dlx yummacss init

This creates a yumma.config.mjs file at your project root. The same configuration file powers the CLI & the bundler plugins (@yummacss/vite & @yummacss/postcss).

yumma.config.mjs

import { defineConfig } from "yummacss";
export default defineConfig({  source: [""],  output: "",});

Source

A collection of paths for your template files (e.g., .js, .tsx, .html). The CLI scans these files for utilities to include in the final CSS file.

Use glob patterns to include subfolders & specific file types.

yumma.config.mjs

import { defineConfig } from "yummacss";
export default defineConfig({  source: ["./src/**/*.html"],});

Output

Specifies the output path for the compiled CSS file.

Only the CLI uses output. The bundler plugins ignore it & inject the generated CSS through the @yummacss; marker instead.

yumma.config.mjs

import { defineConfig } from "yummacss";
export default defineConfig({  output: "./src/styles.css",});

Normalize

Determines whether to include base styles normalization.

yumma.config.mjs

import { defineConfig } from "yummacss";
export default defineConfig({  normalize: true, // default: true});

Prefix

Prepends a custom string to all generated Yumma CSS utility classes, effectively namespacing them to avoid collisions.

yumma.config.mjs

import { defineConfig } from "yummacss";
export default defineConfig({  prefix: "ui",});

When a prefix is set, all utilities must include it-including entries in the safelist. For example, if your prefix is ui, use ui-bg-red instead of bg-red.

<button className="ui-bg-indigo ui-c-white ui-p-4 ui-br-sm">Prefixed Button</button>

Theme

Extends or overrides default design tokens.

Colors

Define custom color families. The compiler automatically generates shades (from 0 to 9) unless a full palette is explicitly provided.

Use percentage to control how much the shade is lightened or darkened.

yumma.config.mjs

import { defineConfig } from "yummacss";
export default defineConfig({  theme: {    colors: {      brand: "#9333EA",      percentage: {        light: 14,        dark: 14,      },    },  },});

A color may also be a light/dark pair, which compiles to CSS light-dark() & resolves per color scheme. Both sides are scaled independently, so every shade of a paired color is itself a pair.

yumma.config.mjs

import { defineConfig } from "yummacss";
export default defineConfig({  theme: {    colors: {      surface: { light: "#ffffff", dark: "#111214" },    },  },});

As soon as one color is paired, color-scheme: light dark is declared on :root so the page follows the operating system. Override it with the Color Scheme utilities. See Dark Mode for the full walkthrough.

Screens

Define custom media query breakpoints or override existing ones.

yumma.config.mjs

import { defineConfig } from "yummacss";
export default defineConfig({  theme: {    screens: {      sm: "40rem",      md: "48rem",      lg: "64rem",      xl: "80rem",      xxl: "96rem",      "3xl": "112rem",    },  },});

Safelist

An array of utility classes that should always be generated in the final CSS output, regardless of whether they are present in your source files. Use this for classes that are added dynamically via JavaScript.

Use safelist for classes generated dynamically at runtime. For example, in React, a template literal like d-f cannot be detected by the file scanner, making a safelist necessary.

yumma.config.mjs

import { defineConfig } from "yummacss";
export default defineConfig({  safelist: ["bg-red", "c-white", "fw-700"],});

Generate Styles

The CLI scans files specified in source & generates a CSS file based on the utilities used.

HTML Input

index.tsx

<button className="bg-white c-black bw-1">Button</button>

CSS Output

Running the build or watch command generates the following CSS:

styles.css

.bg-white {
  background-color: #ffffff;
}

.bw-1 {
  border-width: 1px;
}

.c-black {
  color: #000000;
}

CLI Commands

The Yumma CSS CLI provides commands to manage your project.

Create a yumma.config.mjs file before running these commands. If you haven't, run yummacss init.

Build

Compile your Yumma CSS files once.

pnpm dlx yummacss build

Watch

Watch for file changes & recompile automatically.

pnpm dlx yummacss watch