Yumma CSS is a CSS framework of utility classes, each named by the initials of the property it sets. It writes only the classes you use.

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. 1

   Install Yumma CSS

   ​

   Copy

   pnpm add yummacss @yummacss/vite -D
   

2. 2

   Add the Plugin

   Register the plugin in your Vite configuration.

   vite.config.ts

   Copy

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

3. 3

   Configure Sources

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

   yumma.config.mjs

   Copy

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

4. 4

   Add the Marker

   Add the @yummacss; marker to your CSS entry file. The plugin replaces it with generated CSS.

   src/styles.css

   Copy

   @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. 1

   Install Yumma CSS

   ​

   Copy

   pnpm add yummacss @yummacss/postcss -D
   

2. 2

   Configure PostCSS

   Register the plugin in your PostCSS configuration.

   postcss.config.mjs

   Copy

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

3. 3

   Configure Sources

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

   yumma.config.mjs

   Copy

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

4. 4

   Add the Marker

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

   globals.css

   Copy

   @yummacss;
   

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. 1

   Install Yumma CSS

   ​

   Copy

   pnpm add yummacss -D
   

2. 2

   Initialize Configuration

   Create a configuration file in your project.

   ​

   Copy

   pnpm dlx yummacss init
   

3. 3

   Configure Sources

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

   yumma.config.mjs

   Copy

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

4. 4

   Build styles

   Start using Yumma CSS classes, then generate your styles.

   ​

   Copy

   pnpm dlx yummacss build