Configuration

Configure Yumma CSS for your project.

Installing the CLI

Use the Yumma CSS CLI to generate production-ready styles.

pnpm add yummacss -D

Setting up a project

Initialize a configuration file in your project.

pnpm dlx yummacss init

Creates yummacss.config.mjs at your project root, read by the CLI & both plugins.

yummacss.config.mjs

import { defineConfig } from "yummacss";
export default defineConfig({  source: ["./src/**/*.{js,jsx,ts,tsx,mdx,html}"],  output: "./src/styles.css",});

source

Use glob patterns to include subfolders & specific file types.

yummacss.config.mjs

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

output

Specifies the output path for the compiled CSS file.

yummacss.config.mjs

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

normalize

Determines whether to include base styles normalization.

yummacss.config.mjs

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

Theme

Extends or overrides default design tokens.

theme.colors

Add color families. Each gets shades 1 to 12 unless you write them out.

yummacss.config.mjs

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

yummacss.config.mjs

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

theme.screens

Define custom media query breakpoints or override existing ones.

yummacss.config.mjs

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

theme.states

Name your own variants for attributes your components set. Each name becomes a prefix like h:. See States.

yummacss.config.mjs

import { defineConfig } from "yummacss";
export default defineConfig({  theme: {    states: {      closing: "[data-ending-style]",    },  },});

theme.fonts

Add font stacks, each an ff: class. See Font Family.

yummacss.config.mjs

import { defineConfig } from "yummacss";
export default defineConfig({  theme: {    fonts: {      display: '"Esteban", serif',    },  },});

theme.keyframes

Add keyframes, each an an: class. See Animation Name.

yummacss.config.mjs

import { defineConfig } from "yummacss";
export default defineConfig({  theme: {    keyframes: {      spin: "to { rotate: 360deg; }",    },  },});

theme.easings

Add easing curves, each a ttf: & an atf: class. See Transition Timing Function.

yummacss.config.mjs

import { defineConfig } from "yummacss";
export default defineConfig({  theme: {    easings: {      "out-quart": "cubic-bezier(0.25, 1, 0.5, 1)",    },  },});

theme.boxShadow

Add shadows, each a bs-o: class. A shadow can stack several layers & use light-dark() for its colors. See Box Shadow.

yummacss.config.mjs

import { defineConfig } from "yummacss";
export default defineConfig({  theme: {    boxShadow: {      key: "0 0 0 1px light-dark(#0000001a, #000), 0 1px 2px #00000012",    },  },});

safelist

Classes to generate even when no file contains them, such as one built at runtime.

yummacss.config.mjs

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

Generating styles

The CLI checks the source files you've given it and makes a CSS file using the utilities it finds.

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

CLI commands

First, you'll need a yummacss.config.mjs file. If there is none, 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

Lint

This is completely optional. Use lint only to double-check the CSS generation with Yumma CSS.

Oxlint

1
Install the plugin
```
pnpm add -D oxlint @yummacss/lint
```

Activate the rules

.oxlintrc.json

{
  "jsPlugins": ["@yummacss/lint"],
  "rules": {
    "yummacss/no-unknown-classes": "error",
    "yummacss/no-inline-styles": "warn"
  }
}

3
Run it
The plugin is written in the ESLint plugin format, which is the format Oxlint loads, so ESLint runs it too.
```
pnpm oxlint
```

Available rules

Rule	Reports
`no-unknown-classes`	A class Yumma CSS does not generate, such as `bg:redd-5`, with the closest class that exists.
`no-inline-styles`	A property in a `style` object, with the class that writes the same declaration, such as `d:f` for `display: "flex"`.

Both rules read className, class & the arguments of cn, clsx & merge, including ternaries & template literals.

no-inline-styles skips custom properties, so a value that changes at runtime goes through one:

<div className="w:var(--progress)" style={{ "--progress": `${value}%` }} />

Options

Every rule takes allow & message.

.oxlintrc.json

{
  "rules": {
    "yummacss/no-unknown-classes": [
      "error",
      {
        "allow": ["brand-logo", "editor-*"],
        "message": "{{className}} is not on the scale. Did you mean {{suggestions}}?"
      }
    ]
  }
}

Option	Type	Description
`allow`	`string[]`	Class names to accept, or CSS property names for `no-inline-styles`. A trailing `*` matches a prefix.
`message`	`string`	Replaces the rule's message. `{{className}}`, `{{property}}` & `{{suggestions}}` are filled in.

Skip a single line with a comment:

// oxlint-disable-next-line yummacss/no-unknown-classes
<div className="brand-logo" />

One-off check

yummacss lint scans your source files from your configuration and lists every class that it does not recognize.

pnpm dlx yummacss lint

Scanned 128 files and found 214 unique classes.
Found 2 classes Yumma CSS does not recognize:
 "ai:st" - did you mean "ai:s"?
  - src/components/hero.tsx
 "flex-center"
  - src/components/layout.tsx
Fix the classes above, or pass --allow "class-a,class-b" for custom classes.

Flag	Alias	Description
`--allow`	`-a`	Comma-separated class names to skip. Repeat it to add more.
`--config`	`-c`	Path to the config file, absolute or relative to the working directory. Defaults to `yummacss.config.mjs`.