Yumma CSS

https://github.com/yummacss/docs
Admin
Yumma CSS is a utility-first CSS framework built on CSS property names, using property and value...
Tokens:23,483
Snippets:357
Trust Score:6.4
License:MIT
Update:1 day ago
Show doc for...
Tokens:
Raw
### Install dependencies and start development server

Source: https://github.com/yummacss/docs/blob/main/README.md

Run these commands from the project root to set up the docs site in development mode. `pnpm i` installs dependencies, and `pnpm d` starts both the Next.js dev server and Yumma CSS in watch mode.

```bash
# install dependencies
pnpm i
# start development
pnpm d
```

--------------------------------

### Install Oxlint Plugin

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/configuration.mdx

Install the Oxlint plugin and the Yumma CSS lint rules.

```bash
pnpm add -D oxlint @yummacss/lint
```

--------------------------------

### Configure Rule Options

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/configuration.mdx

Example of configuring `allow` and `message` options for a rule in `.oxlintrc.json`.

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

--------------------------------

### Install Yumma CSS with PostCSS plugin

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/installation.mdx

Install the yummacss package and the @yummacss/postcss plugin as dev dependencies using pnpm.

```bash
pnpm add yummacss @yummacss/postcss -D
```

--------------------------------

### Install Yumma CSS with Vite plugin

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/installation.mdx

Install the yummacss package and the @yummacss/vite plugin as dev dependencies using pnpm.

```bash
pnpm add yummacss @yummacss/vite -D
```

--------------------------------

### Animate out with starting style and state

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/states.mdx

Pairs the starting style and a custom state to animate a popup out. The example uses @st:o:0 and closing:o:0.

```tsx
<div className="tp:a tdu:150 @st:o:0 @st:s:90 closing:o:0 closing:s:90">
  Settings
</div>
```

--------------------------------

### Create a Vite project

Source: https://github.com/yummacss/docs/blob/main/src/content/ui/installation.mdx

Use this command to scaffold a new React + TypeScript project with Vite. This is the first step in the installation workflow.

```bash
pnpm create vite my-app --template react-ts
```

--------------------------------

### Install the Yumma CSS skill with npx

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/agents.mdx

Installs the Yumma CSS and Yumma UI skill for agents that load skills, such as Claude Code. The rules are read from the site each time, so they never go stale.

```bash
npx skills add yummacss/yummacss
```

--------------------------------

### Class name mapping examples

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/naming-convention.mdx

Shows how CSS declarations map to Yumma CSS class names using initials.

```markdown
display: flex;                   /* d:f   */
justify-content: space-between;  /* jc:sb */
text-transform: uppercase;       /* tt:u  */
```

--------------------------------

### Add a component with yummaui add

Source: https://github.com/yummacss/docs/blob/main/src/content/ui/installation.mdx

Run this command to add a component (e.g., button) to your project. Any npm dependencies, such as @base-ui/react, are installed automatically.

```bash
pnpm dlx yummaui add button
```

--------------------------------

### yumma.config.mjs example

Source: https://github.com/yummacss/docs/blob/main/src/content/ui/installation.mdx

This is the configuration file that init writes. It defines states, easings, keyframes, and colors used by the components. If a config already exists, init and add only add missing parts and preserve existing definitions.

```js
import { defineConfig } from "yummacss";

export default defineConfig({
  source: ["./src/**/*.{js,jsx,ts,tsx,mdx}"],
  theme: {
    states: {
      closing: "[data-ending-style]",
      "from-left": "[data-activation-direction=left]",
      "from-right": "[data-activation-direction=right]",
      hovering: "[data-hovering]",
      opening: "[data-starting-style]",
      scrolling: "[data-scrolling]",
      swiping: "[data-swiping]",
    },
    easings: {
      "in-out-cubic": "cubic-bezier(0.65, 0, 0.35, 1)",
      "out-back": "cubic-bezier(0.34, 1.56, 0.64, 1)",
      "out-quart": "cubic-bezier(0.25, 1, 0.5, 1)",
    },
    keyframes: {
      pulse: "0%, 100% { opacity: .5; } 50% { opacity: 1; }",
      slide: "from { translate: -100% 0; } to { translate: 100% 0; }",
      spin: "to { rotate: 360deg; }",
    },
    colors: {
      raised: { light: "#ffffff", dark: "#2d2f33" },
      well: { light: "#eff0f2", dark: "#18191b" },
      field: { light: "#ffffff", dark: "#18191b" },
      fill: { light: "#1e232a", dark: "#e6e9ec" },
      "on-fill": { light: "#ffffff", dark: "#1e232a" },
      label: { light: "#1e232a", dark: "#ececee" },
      hint: { light: "#64748b", dark: "#9a9ca3" },
      rim: { light: "#d1d5dc", dark: "#424447" },
      shadow: { light: "#a5aebc", dark: "#0a0a0b" },
      line: { light: "#e1e3e7", dark: "#2f3032" },
      check: { light: "#2563eb", dark: "#2563eb" },
      on: { light: "#10b981", dark: "#10b981" },
      knob: { light: "#ffffff", dark: "#e6e9ec" },
      groove: { light: "#c4c9d1", dark: "#08090a" },
      glint: { light: "#ffffff", dark: "#4f5258" },
      focus: { light: "#7a879b", dark: "#8f9bab" },
    },
  },
});
```

--------------------------------

### Install Yumma CLI with pnpm

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/configuration.mdx

Adds the Yumma CSS package as a dev dependency, which includes the Yumma CLI for generating production-ready styles.

```bash
pnpm add yummacss -D
```

--------------------------------

### Fade & Grow with @st:o:0 and @st:s:90

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/starting-style.mdx

Stack multiple starting values to animate both opacity and scale. Use a transition property that covers each property.

```tsx
<div className="tp:a tdu:150 ttf:eo @st:o:0 @st:s:90">Settings</div>
```

--------------------------------

### Mobile-first breakpoint example with @sm: prefix

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/media-queries.mdx

Shows how to apply a utility from a breakpoint up. The first line is deleted (del={1}) and the second is inserted (ins={2}), demonstrating a change from center-aligned text on small screens to left-aligned from the @sm breakpoint upward.

```tsx
<h1 className="… @sm:ta:c">Good evening!</h1>
<h1 className="ta:c … @sm:ta:l">Good evening!</h1>
```

--------------------------------

### Animate In with @st:o:0

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/starting-style.mdx

Use `@st:o:0` to set the starting opacity to 0 for an element that appears. The element renders at opacity 0, then transitions to its normal opacity over 150ms.

```tsx
<div className="tp:o tdu:150 @st:o:0">Saved to Documents</div>
```

```css
@starting-style {
  .\@st\:o\:0 {
    opacity: 0;
  }
}
```

--------------------------------

### Negative Z-Index Example

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/negative-values.mdx

Use `zi:-10` to place an element behind its siblings or parents.

```tsx
<div className="p:r …">
  <div className="p:a zi:-10 …"></div>
  <span>Background Layer</span>
</div>
```

--------------------------------

### Stacking container query with @c:md:h:o:80

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/container-queries.mdx

A container query stacks with any other variant, like every at-rule. This example shows a class that combines an opacity utility with a container-query variant that sets opacity to 80% at the `md` container width.

```tsx
<a className="o:100 @c:md:h:o:80">Open folder</a>
```

--------------------------------

### With Breakpoints using @md:@st:o:0

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/starting-style.mdx

Nest the `@st:` at-rule inside a breakpoint to apply starting styles only at certain viewport sizes.

```tsx
<div className="tp:o tdu:150 @md:@st:o:0"></div>
```

```css
@media (min-width: 48rem) {
  @starting-style {
    .\@md\:\@st\:o\:0 {
      opacity: 0;
    }
  }
}
```

--------------------------------

### Negative Positioning Example

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/negative-values.mdx

Use `t:-4` and `l:-4` to position an element outside its parent.

```tsx
<div className="p:r …">
  <div className="p:a t:-4 l:-4 …"></div>
</div>
```

--------------------------------

### Read utility definitions from @yummacss/core

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/installation.mdx

Import `boxModelUtils` and `coreUtils` from `@yummacss/core` to get utility definitions. `boxModelUtils()` returns box model utilities, and `coreUtils()` returns every utility definition.

```js
import { boxModelUtils, coreUtils } from "@yummacss/core";

const boxModel = boxModelUtils();
const everything = coreUtils();
```

--------------------------------

### Define a state in yumma.config.mjs

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/states.mdx

Add custom state selectors to the theme.states object. The example defines 'closing' and 'open' states that map to attribute selectors.

```mjs
import { defineConfig } from "yummacss";

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

--------------------------------

### HTML Input with Yumma CSS classes

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/configuration.mdx

Example of an HTML element using Yumma CSS utility classes. The CLI scans files in the `source` config to generate CSS.

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

--------------------------------

### Use custom breakpoint @3xl:d:b

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/media-queries.mdx

Applies the custom '3xl' breakpoint to set display to block from that width up. This example is part of the 'Use Custom Breakpoints' step and relies on the config file created in the previous step.

```tsx
<div className="d:none @3xl:d:b"></div>
```

--------------------------------

### Button with className for width

Source: https://github.com/yummacss/docs/blob/main/src/content/ui/customization.mdx

Every component takes className and merges it into its own classes. This example adds a width that the component does not set.

```tsx
<Button className="w:100%">Save</Button>
```

--------------------------------

### Negative Margin Example

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/negative-values.mdx

Use `ml:-4` to apply a negative left margin of -1rem, useful for overlapping elements.

```tsx
<div className="zi:10 …">A</div>
<div className="ml:-4 zi:20 …">B</div>
<div className="ml:-4 zi:30 …">C</div>
```

--------------------------------

### Badge with tone, color, size, and shape props

Source: https://github.com/yummacss/docs/blob/main/src/content/ui/customization.mdx

Use props to style components. The component applies the prop itself. This example shows a Badge with tone, color, size, and shape props.

```tsx
<Badge tone="subtle" color="green" size="lg" shape="pill">
  Shipped
</Badge>
```

--------------------------------

### Configure PostCSS plugin with cwd option

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/installation.mdx

Pass the `cwd` option to the PostCSS plugin to set the base directory for resolving config and source globs. The example uses `import.meta.dirname`.

```js
export default {
  plugins: {
    "@yummacss/postcss": { cwd: import.meta.dirname },
  },
};
```

--------------------------------

### Dialog with focus prop

Source: https://github.com/yummacss/docs/blob/main/src/content/ui/customization.mdx

Use the focus prop to style the focus outline. This example sets the outline color with fv:oc:blue-2/60.

```tsx
<Dialog trigger="Rename" title="Rename file" focus="fv:oc:blue-2/60" />
```

--------------------------------

### Configure Custom Colors

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/color-system.mdx

Extend or override the default palette using the `theme.colors` configuration option. This example adds a new color family and overrides the default blue.

```mjs
import { defineConfig } from "yummacss";

export default defineConfig({
  theme: {
    colors: {
      background: "#f5f6f7", // add new color family
      blue: "#1a73e8", // overrides the default blue.
    },
  },
});
```

--------------------------------

### Using keyframes with animation utilities

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/animation-name.mdx

Combine a keyframe name with animation duration, timing function, and iteration count. The example shows a spinning element with a 700ms duration, linear timing, and infinite iteration. The output CSS includes the keyframes only if used.

```tsx
<span className="d:b w:4 h:4 bw:2 br:9999 an:spin adu:700 atf:l aic:inf"></span>
```

```css
.an\:spin {
  animation-name: spin;
}

@keyframes spin {
  to { rotate: 360deg; }
}
```

--------------------------------

### Build the docs site

Source: https://github.com/yummacss/docs/blob/main/README.md

Run `pnpm build` to build the documentation site for production.

```bash
pnpm build
```

--------------------------------

### Initialize a yummaui project

Source: https://github.com/yummacss/docs/blob/main/src/content/ui/configuration.mdx

Run this command to detect your framework, package manager, and import alias, then prompt for where components live. Use --force to replace an existing yummaui.json, or -y/--yes to skip prompts and take defaults.

```bash
pnpm dlx yummaui init
```

--------------------------------

### List components

Source: https://github.com/yummacss/docs/blob/main/src/content/ui/configuration.mdx

Prints every component.

```bash
pnpm dlx yummaui list
```

--------------------------------

### Add components with yummaui

Source: https://github.com/yummacss/docs/blob/main/src/content/ui/configuration.mdx

Copies one or more components in. With no names, it opens a list to search and pick from. Options include -a/--all to add every component, --style (soft, compact, squircle), --radius (none, small, medium, large, extra), --overwrite to replace existing files, and -y/--yes to skip prompts.

```bash
pnpm dlx yummaui add button
```

```bash
pnpm dlx yummaui add dialog tooltip
```

```bash
pnpm dlx yummaui add
```

```bash
pnpm dlx yummaui add --all
```

```bash
pnpm dlx yummaui add button --style compact --radius small
```

--------------------------------

### Initialize Yumma configuration

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/configuration.mdx

Creates a yumma.config.mjs file at the project root, which is read by the CLI and both plugins.

```bash
pnpm dlx yummacss init
```

--------------------------------

### Register PostCSS plugin in postcss.config.mjs

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/installation.mdx

Add the @yummacss/postcss plugin to your PostCSS configuration. Works with Next.js and any PostCSS setup.

```mjs
export default {
  plugins: {
    "@yummacss/postcss": {},
  },
};
```

--------------------------------

### Create a Next.js project

Source: https://github.com/yummacss/docs/blob/main/src/content/ui/installation.mdx

Use this command to scaffold a new Next.js project. This is an alternative to the Vite command, depending on your framework choice.

```bash
pnpm create next-app@latest my-app
```

--------------------------------

### Inline Style with Custom Property

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/configuration.mdx

Example of using a custom property in a style object; `no-inline-styles` skips custom properties.

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

--------------------------------

### Responsive display utilities with breakpoint prefixes

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/media-queries.mdx

Shows how to show different text for each breakpoint range. Each paragraph uses a combination of 'd:none' and 'd:b' with breakpoint prefixes to control visibility from small to extra-large screens.

```tsx
<p className="d:b … @sm:d:none">Small screen</p>
<p className="d:none @md:d:none … @sm:d:b">Medium screen</p>
<p className="d:none @lg:d:none … @md:d:b">Large screen</p>
<p className="d:none @xl:d:none … @lg:d:b">Extra large screen</p>
<p className="d:none … @xxl:d:b">Double extra large screen</p>
```

--------------------------------

### Build Command

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/configuration.mdx

Compile Yumma CSS files once. Requires a `yumma.config.mjs` file; run `yummacss init` if missing.

```bash
pnpm dlx yummacss build
```

--------------------------------

### Letter Spacing Sign Toggle Example

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/negative-values.mdx

Use `ls:-1` to flip the negative letter-spacing value to a positive one, making spacing wider.

```tsx
<p className="ls:1 …">Standard (Tight)</p>
<p className="ls:-1 …">Negated (Wide)</p>
```

--------------------------------

### Button with focus disabled

Source: https://github.com/yummacss/docs/blob/main/src/content/ui/customization.mdx

Set focus={false} to remove the focus outline and its danger, error, and success tints. This example also adds a background class.

```tsx
<Button variant="danger" focus={false} className="fv:bg:silver-2">
  Delete
</Button>
```

--------------------------------

### Append agents.md to AGENTS.md with curl

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/agents.mdx

Saves the rules file as the instructions file your agent reads, typically AGENTS.md at the project root. Appends so existing instructions stay.

```bash
curl -s https://www.yummacss.com/agents.md >> AGENTS.md
```

--------------------------------

### Example of conflicting classes in JSX

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/class-merge.mdx

Shows two spans with the same classes in different orders, both rendering white because `c:white` is generated after `c:accent` in the stylesheet.

```tsx
<span className="c:white c:accent">Accent</span>
<span className="c:accent c:white">Accent</span>
```

--------------------------------

### Reduced motion variant

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/animation-name.mdx

Use the `@prm:` variant to stop an animation for users who prefer reduced motion. The example applies `an:none` to override the spin animation.

```tsx
<span className="an:spin adu:700 aic:inf @prm:an:none"></span>
```

--------------------------------

### Media queries work the same way

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/class-merge.mdx

Shows that media query variants are compared within their own variant, so `@lg:p:8` overrides `@lg:p:4` but not `p:2`.

```tsx
merge("@lg:p:4 p:2", "@lg:p:8"); // "p:2 @lg:p:8"
```

--------------------------------

### Button with className overriding color

Source: https://github.com/yummacss/docs/blob/main/src/content/ui/customization.mdx

className overrides component classes via merge. This example uses c:accent to override the component's default color.

```tsx
<Button className="c:accent">Save</Button>
```

--------------------------------

### Registry endpoints

Source: https://github.com/yummacss/docs/blob/main/src/content/ui/configuration.mdx

Static JSON published by this site. Point 'registry' at your own copy to serve components from somewhere else.

```text
https://yummacss.com/ui/registry/index.json                     every component, and the theme they animate with
https://yummacss.com/ui/registry/<id>.json                      one component's source and dependencies
https://yummacss.com/ui/registry/styles.json                    the styles and the radius steps each takes
https://yummacss.com/ui/registry/<style>-<radius>/<id>.json     the same, rewritten for a style
```

--------------------------------

### Media query and pseudo-element with @sm:p::c:silver

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/nested-variants.mdx

Sets placeholder color on small screens and up.

```tsx
<input className="@sm:p::c:silver" placeholder="Enter your email…" />
```

--------------------------------

### Run Oxlint

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/configuration.mdx

Run Oxlint to check for Yumma CSS issues. The output shows an error for an unknown class and a warning for an inline style.

```bash
pnpm oxlint
```

```text
src/app.tsx:4:25: error yummacss(no-unknown-classes): `bg:redd-5` is not a Yumma CSS class, so it generates no CSS. Did you mean `bg:red-5`?
src/app.tsx:4:68: warning yummacss(no-inline-styles): `display: flex` is set inline. Use `d:f` instead.
```

--------------------------------

### Configure Oxlint Rules

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/configuration.mdx

Register the plugin and set rule levels in `.oxlintrc.json`.

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

--------------------------------

### Enable normalize

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/configuration.mdx

Sets normalize to true to include base styles normalization. The default is true.

```mjs
import { defineConfig } from "yummacss";

export default defineConfig({
  normalize: true, // default: true
});
```

--------------------------------

### yummaui.json configuration file

Source: https://github.com/yummacss/docs/blob/main/src/content/ui/configuration.mdx

Configuration file for yummaui. Fields: componentsDir (where components are written), alias (import prefix or null for relative imports), registry (where components are fetched from), style (default style for add), radius (default radius for add).

```json
{
  "componentsDir": "src/components/ui",
  "alias": "@/components/ui",
  "registry": "https://yummacss.com/ui/registry"
}
```

--------------------------------

### Configure source files

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/configuration.mdx

Sets the source option to scan HTML files only. Use glob patterns to include subfolders and specific file types.

```mjs
import { defineConfig } from "yummacss";

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

--------------------------------

### Using Color Utilities

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/color-system.mdx

Apply color system utilities to style your elements.

```tsx
<div className="bg:red …"></div>
<div className="bg:green …"></div>
<div className="bg:blue …"></div>
```

--------------------------------

### Basic yumma.config.mjs with source and output

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/configuration.mdx

Defines the source glob pattern for scanning classes and the output path for the compiled CSS file. The output is used only by the CLI; bundler plugins ignore it and inject CSS via the @yummacss; marker.

```mjs
import { defineConfig } from "yummacss";

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

--------------------------------

### Define custom screens

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/configuration.mdx

Defines custom media query breakpoints or overrides existing ones. Each key becomes a screen prefix.

```mjs
import { defineConfig } from "yummacss";

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

--------------------------------

### Prune unused components

Source: https://github.com/yummacss/docs/blob/main/src/content/ui/configuration.mdx

Finds component files nothing in your project reaches. Use --write to delete instead of only listing, and -y/--yes to skip the confirmation. Only files 'add' wrote are ever candidates; your own components are never touched.

```bash
pnpm dlx yummaui prune
```

```bash
pnpm dlx yummaui prune --write
```

--------------------------------

### Using calc() in a class and its CSS output

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/css-functions.mdx

Write a value off the scale as the CSS function it is. A class cannot hold spaces, so write the function without them; the spaces CSS needs around + and - are added in the output.

```tsx
<nav className="p:st t:20 max-h:calc(100dvh-5rem)"></nav>
```

```css
.max-h\:calc\(100dvh-5rem\) {
  max-height: calc(100dvh - 5rem);
}
```

--------------------------------

### Coarse pointer with @pc:a:bg:indigo-7

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/nested-variants.mdx

Changes background on tap for coarse pointers. Uses @pc: to target coarse pointers directly.

```tsx
<button type="button" className="p:4 bg:indigo @pc:a:bg:indigo-7">Tap me</button>
```

--------------------------------

### Configure sources and output in yumma.config.mjs

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/installation.mdx

Specify the file paths to scan and the output CSS file path. The `source` option accepts glob patterns, and `output` defines where the generated CSS is written.

```mjs
import { defineConfig } from "yummacss";

export default defineConfig({
  source: ["./src/**/*.{ts,tsx}"],
  output: "./src/styles.css",
});
```

--------------------------------

### Configure sources in yumma.config.mjs

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/installation.mdx

Specify the file paths to scan for Yumma CSS classes. The `source` option accepts glob patterns.

```mjs
import { defineConfig } from "yummacss";

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

--------------------------------

### Append agents.md to AGENTS.md with PowerShell

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/agents.mdx

PowerShell alternative to append the rules file to AGENTS.md. Add-Content appends, so existing instructions stay.

```powershell
irm https://www.yummacss.com/agents.md | Add-Content AGENTS.md
```

--------------------------------

### One-Off Lint Command

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/configuration.mdx

Run `yummacss lint` to scan source files and list unrecognized classes. Exits with 1 if any are found.

```bash
pnpm dlx yummacss lint
```

```text
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.
```

--------------------------------

### Watch Command

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/configuration.mdx

Watch for file changes and recompile automatically. Requires a `yumma.config.mjs` file.

```bash
pnpm dlx yummacss watch
```

--------------------------------

### Media query and pseudo-class with @lg:h:td:u

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/nested-variants.mdx

Underlines a link on hover only at large breakpoints. The @pc: variant targets coarse pointers similarly.

```tsx
<a href="/docs" className="c:blue @lg:h:td:u">Documentation</a>
```

--------------------------------

### Using merge with falsy arguments

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/class-merge.mdx

Demonstrates that falsy arguments are skipped, allowing clean conditional classes.

```tsx
<div className={merge("d:f ai:c", isOpen && "bg:silver-1", className)}></div>
```

--------------------------------

### Basic container query with ct:is and @c:sm:fs:xl

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/container-queries.mdx

Mark the parent with `ct:is` and prefix a child's class with `@c:`. The child style applies once the container reaches the specified width. The output CSS shows the generated `container-type` and `@container` rule.

```tsx
<div className="ct:is">
  <h2 className="fs:md @c:sm:fs:xl">Recent files</h2>
</div>
```

```css
.ct\:is {
  container-type: inline-size;
}

@container (min-width: 40rem) {
  .\@c\:sm\:fs\:xl {
    font-size: 1.25rem;
  }
}
```

--------------------------------

### Generated CSS Output

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/configuration.mdx

CSS generated by the `build` or `watch` command from the utility classes used in the source files.

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

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

.c\:black {
  color: #000000;
}
```

--------------------------------

### Use Custom Color Shades

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/color-system.mdx

The bundler plugins & `yummacss watch` pick up config changes automatically.

```tsx
<div className="bg:background-6 …">
  <h1 className="c:blue-5 …">Good evening</h1>
</div>
```

--------------------------------

### Use Custom Colors

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/color-system.mdx

The bundler plugins & `yummacss watch` pick up config changes automatically.

```tsx
<div className="bg:background …">
  <h1 className="c:blue …">Good evening</h1>
</div>
```

--------------------------------

### Style ::before with b::p:a and b::bg:indigo/10

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/pseudo-elements.mdx

Creates a pseudo-element that is the first child of the selected element. Requires content to be visible; set content via CSS or inline styles when using ::before.

```tsx
<div className="p:r p:8 b::p:a b::i:0 b::bg:indigo/10">Styled content</div>
```

--------------------------------

### Run yummacss lint with pnpm dlx

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/agents.mdx

Runs the lint check in CI. Exits with 1 when a class does not exist. See Lint documentation for the command and Oxlint rules.

```bash
pnpm dlx yummacss lint
```

--------------------------------

### Add keyframes

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/configuration.mdx

Adds keyframes, each becomes an an: class. See Animation Name docs.

```mjs
import { defineConfig } from "yummacss";

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

--------------------------------

### Focus pseudo-class with f:oc:indigo-4, f:oo:2, f:os:s, f:ow:2

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/pseudo-classes.mdx

Applies focus styles to a button when it receives focus via click, tap, or the Tab key. Uses the 'f:' prefix for focus-related variants.

```tsx
<button className="… f:oc:indigo-4 f:oo:2 f:os:s f:ow:2">
  Click me
</button>
```

--------------------------------

### Document Normalization

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/normalize.mdx

Sets a default system font, improves rendering, and applies accessible line-height.

```css
normalize="html; body"
```

--------------------------------

### Configure Custom Color Shades

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/color-system.mdx

Set `theme.colors.percentage` to change how far each shade steps from the base. The default is 14 for both light and dark.

```mjs
import { defineConfig } from "yummacss";

export default defineConfig({
  theme: {
    colors: {
      background: "#f5f6f7",
      blue: "#1a73e8",
      percentage: {
        light: 16, // default is 14
        dark: 16, // default is 14
      },
    },
  },
});
```

--------------------------------

### Style ::placeholder with p::c:silver

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/pseudo-elements.mdx

Styles the placeholder text for input or textarea elements.

```tsx
<input className="… p::c:silver" placeholder="Enter your email…" />
```

--------------------------------

### List Normalization

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/normalize.mdx

Lists have no markers or indent.

```css
normalize="ol, ul"
```

--------------------------------

### Safelist classes

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/configuration.mdx

Lists classes to generate even when no file contains them, such as classes built at runtime. The scanner cannot see runtime-built classes like `d:${display}`.

```mjs
import { defineConfig } from "yummacss";

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

--------------------------------

### Using merge in a component

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/class-merge.mdx

Shows how to use `merge` in a JSX className to combine a base class with a passed-in className, so the passed class wins.

```tsx
<span className={merge("c:white", className)}>Accent</span>
```

--------------------------------

### Configure output path

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/configuration.mdx

Specifies the output path for the compiled CSS file. Only the CLI uses this option; bundler plugins ignore it and inject CSS via the @yummacss; marker.

```mjs
import { defineConfig } from "yummacss";

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

--------------------------------

### Stack variants with @sm:h:bg:red

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/nested-variants.mdx

Applies a background color on hover only above 40rem. The CSS output shows the generated media query and hover rule.

```tsx
<button type="button" className="bg:indigo @sm:h:bg:red">Hover me</button>
```

```css
@media (min-width: 40rem) {
  .\@sm\:h\:bg\:red:hover {
    background-color: #e63946;
  }
}
```

--------------------------------

### Using Color Shades

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/color-system.mdx

Each family is one base color plus 12 shades: `1–6` lighter, `7–12` darker. The step size is controlled by `percentage.light` & `percentage.dark` in your config. Both default to `14`.

```tsx
<div className="bg:red-5 …"></div>
<div className="bg:green-5 …"></div>
<div className="bg:blue-5 …"></div>
```

--------------------------------

### Style ::selection with s::bg:indigo

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/pseudo-elements.mdx

Applies styles to highlighted/selected text.

```tsx
<p className="… s::bg:indigo">
  Select this text to see custom selection colors!
</p>
```

--------------------------------

### Merging with partial coverage

Source: https://github.com/yummacss/docs/blob/main/src/content/docs/class-merge.mdx

Shows that `w:10 h:10` and `w:12` merge to `"h:10 w:12"` because `w:12` only covers the width, not the height.

```tsx
merge("w:10 h:10", "w:12"); // "h:10 w:12"
```
Tokens:
Raw