Configuration

Configure your Yumma CSS project.

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.

Use glob patterns to include subfolders & specific file types.

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",
});

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 class="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.

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. Use this for classes that are added dynamically via JavaScript.

import { defineConfig } from "yummacss";

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

Use safelist for classes generated dynamically at runtime. For example, in React, a template literal like `bg-\${color}-5` cannot be detected by the file scanner, making a safelist necessary.

The compiler includes safelisted classes even if they are missing from your source files.

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.

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

Build

Compile your Yumma CSS files once.

npx yummacss build

Watch

Watch for file changes & recompile automatically.

npx yummacss watch