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;
```

Setting up a standalone

Are you not using frameworks? Yumma CSS can run 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();