Configuration

Learn how to set up the Yumma CSS CLI.

Installing the CLI

Yumma CSS comes with the Yumma CLI, a powerful tool that’s a breeze to set up and takes no time or effort for production-ready projects.

pnpm add yummacss -D

npm i yummacss -D

yarn add yummacss -D

Creating your configuration file

To start using the CLI, you need to create a configuration file in your project.

pnpx yummacss init

npx yummacss init

yarn dlx yummacss init

This will create a complete yumma.config.mjs file at the root of your project shown below.

export default {
  source: [""],
  output: "",
  buildOptions: {
    reset: true,
    minify: false,
  },
};

source

A collection of paths for your template files, such as .js, .tsx, or .html files. This is where the CLI will look for utilities to include in the final CSS file.

Use glob patterns to include subfolders and specific file types.

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

output

A string that specifies the output path for the compiled CSS file. This is where the CLI will save the final CSS file after processing your template files.

export default {
  output: "./src/styles.css",
};

reset

A boolean that determines whether the inclusion of the base styles.

export default {
  buildOptions: {
    reset: true, // default: true
  },
};

minify

A boolean that determines whether the compiled CSS files should or not be minified. This is useful for production builds where you want to reduce the file size for faster loading times.

export default {
  buildOptions: {
    minify: true, // default: false
  },
};

Generating styles

The CLI will scan all the files specified in the source array and generate a single CSS file based on the utilities used in those files. The output file is specified in the output field.

Input

Let’s say you have the following HTML file:

<button class="bg-white px-4 rad-1 bs-lg fw-600">
  Button
</div>

Output

Once you run the either build or watch command, the CLI will generate the following CSS file:

h1 {
  overflow-wrap: break-word;
  text-wrap: balance;
  font-size: 1rem;
  font-weight: 600;
}

.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.fs-xl {
  font-size: 1.25rem;
}

.ta-c {
  text-align: center;
}

CLI Commands

The Yumma CSS CLI provides several commands to help you work with your Yumma CSS files.

Make sure you have a yumma.config.mjs file set up before running these commands. If you haven’t, run npx yummacss init first.

Build

The build command will compile your Yumma CSS files once.

pnpm yummacss build

npx yummacss build

yarn yummacss build

Watch

The watch command will watch for changes in your Yumma CSS files and recompile them automatically.

pnpm yummacss watch

npx yummacss watch

yarn yummacss watch