# Installation

Install Yumma CSS using a bundler plugin or the CLI.

![Yumma CSS](/og.png)

## Set Up a Framework

Add Yumma CSS to your framework of choice with a single plugin.

### Use with Vite

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

**1. Install Yumma CSS**

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

**2. Add the Plugin**

Register the plugin in your Vite configuration.

```ts title="vite.config.ts" mark={2,5}
import { defineConfig } from "vite";
import yummacss from "@yummacss/vite";

export default defineConfig({
  plugins: [yummacss()],
});
```

**3. Configure Sources**

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

```mjs title="yumma.config.mjs" mark={4}
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.

```css title="src/styles.css"
@yummacss;
```

### Use with 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**

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

**2. Configure PostCSS**

Register the plugin in your PostCSS configuration.

```mjs title="postcss.config.mjs" mark={3}
export default {
  plugins: {
    "@yummacss/postcss": {},
  },
};
```

**3. Configure Sources**

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

```mjs title="yumma.config.mjs" mark={4}
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.

```css title="globals.css"
@yummacss;
```

> The PostCSS plugin works anywhere PostCSS runs, not only Next.js.

## Set Up Standalone

Yumma CSS can be used on its own, without a framework.

### Use with CLI

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

**1. Install Yumma CSS**

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

**2. Initialize Configuration**

Create a configuration file in your project.

```bash
pnpm dlx yummacss init
```

**3. Configure Sources**

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

```mjs title="yumma.config.mjs" mark={4-5}
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.

```bash
pnpm dlx yummacss build
```