Installation

Install Yumma CSS using a bundler plugin or the CLI.

Setting up a framework

Add Yumma CSS to your chosen framework with just one plugin.

Using Vite

Use the @yummacss/vite plugin with Vite & Vite-based frameworks like SvelteKit, Astro, Nuxt, and Solid. Generated CSS is rebuilt automatically as you work.

1
Install Yumma CSS
```
pnpm add yummacss @yummacss/vite -D
```

Add the plugin

vite.config.ts

import { defineConfig } from "vite";import yummacss from "@yummacss/vite";
export default defineConfig({  plugins: [yummacss()],});

Configure sources

Specify the locations/paths of your project files in the config file.

yumma.config.mjs

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

4
Add the marker
Add the @yummacss; marker to your CSS entry file. The plugin replaces it with generated CSS.
src/styles.css
```
@yummacss;
```

Using Next.js

Use the @yummacss/postcss plugin with Next.js. It works with both Turbopack & Webpack through the built-in PostCSS support.

1
Install Yumma CSS
```
pnpm add yummacss @yummacss/postcss -D
```
2
Configure PostCSS
Register the plugin in your PostCSS configuration.
postcss.config.mjs
```
export default {  plugins: {    "@yummacss/postcss": {},  },};
```

Configure sources

Specify the locations/paths of your project files in the config file.

yumma.config.mjs

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

4
Add the marker
Add the @yummacss; marker to your global CSS file. The plugin replaces it with generated CSS.
globals.css
```
@yummacss;
```

Plugin options

Both plugins read yumma.config.mjs from where the build runs. Use these options when the config lives elsewhere.

In a monorepo, PostCSS often runs from the repo root, so cwd points it at your app.

Option	Type	Default	Description
`config`	`Config`		Inline configuration, read instead of the file.
`configPath`	`string`	`yumma.config.mjs`	Path to the config file.
`cwd`	`string`	`process.cwd()`	PostCSS only. Where the config & `source` globs resolve from.

postcss.config.mjs

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

Running without a framework

Not using a framework? Yumma CSS runs without one.

Using the CLI

Prefer generating a plain CSS file? Install Yumma CSS with your favorite package manager & use the CLI:

1
Install Yumma CSS
```
pnpm add yummacss -D
```
2
Initialize configuration
Create a configuration file in your project.
```
pnpm dlx yummacss init
```

Configure sources

Specify the locations/paths of your project files in the config file.

yumma.config.mjs

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

4
Build styles
Start using Yumma CSS classes, then generate your styles.
```
pnpm dlx yummacss build
```

Reading the utilities

@yummacss/core returns every utility definition, one function per category.

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

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