Configuration

Install the CLI

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

pnpm add yummacss -D

Create your configuration file

Initialize a configuration file in your project.

pnpx yummacss init

This creates a yumma.config.mjs file at your project root.

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.

import { defineConfig } from "yummacss";

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

Output

Specifies the output path for the compiled CSS file.

import { defineConfig } from "yummacss";

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

Normalize

Determines whether to include base styles normalization.

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.

import { defineConfig } from "yummacss";

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

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.

import { defineConfig } from "yummacss";

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

Screens

Define custom media query breakpoints or override existing ones.

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.

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

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

CSS Output

Running the build or watch command generates the following 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.

Build

Compile your Yumma CSS files once.

npx yummacss build

Watch

Watch for file changes & recompile automatically.

npx yummacss watch