### Clone Yumma CSS Nuxt.js Starter Project

Source: https://www.yummacss.com/docs/installation/guides/nuxtjs

Provides a quick way to get started by cloning a pre-configured Nuxt.js project that already has Yumma CSS integrated. This skips manual setup steps and is ideal for rapid prototyping or learning.

```Shell
git clone https://github.com/yumma-lib/with-nuxtjs.git
```

--------------------------------

### Clone Yumma CSS Astro Starter Project

Source: https://www.yummacss.com/docs/installation/guides/astro

Clones the official Yumma CSS Astro starter project from GitHub, providing a pre-configured setup to quickly get started.

```Bash
git clone https://github.com/yumma-lib/with-astro.git
```

--------------------------------

### Install Yumma CSS development dependency

Source: https://www.yummacss.com/docs/installation/installation

Add yummacss to your project as a development dependency using your preferred package manager (npm, pnpm, or yarn). This command downloads and installs the necessary packages.

```npm
npm i yummacss -D
```

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

```yarn
yarn add yummacss -D
```

--------------------------------

### Clone Yumma CSS Preact Starter Project

Source: https://www.yummacss.com/docs/installation/guides/preact

This snippet provides the Git command to clone the official Yumma CSS Preact starter project, allowing users to quickly set up a new project without following the manual installation steps.

```Bash
git clone https://github.com/yumma-lib/with-preact.git
```

--------------------------------

### Install Yumma CSS as dev dependency for CLI usage

Source: https://www.yummacss.com/docs/installation/upgrade-guide

Reiteration of installing Yumma CSS as a development dependency, emphasizing its role as a CLI tool for generating CSS files.

```npm
npm i yummacss -D
```

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

```yarn
yarn add yummacss -D
```

--------------------------------

### Install Yumma CSS as a development dependency

Source: https://www.yummacss.com/docs/installation/upgrade-guide

Commands to install the Yumma CSS package as a development dependency for v3, using npm, pnpm, or yarn.

```npm
npm i yummacss -D
```

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

```yarn
yarn add yummacss -D
```

--------------------------------

### Configure Yumma CSS build options in yumma.config.js

Source: https://www.yummacss.com/docs/installation/upgrade-guide

Example configuration for yumma.config.js to specify source files, output path, and build options like reset and minify.

```JavaScript
module.exports = {
  source: ["./src/**/*.html"],
  output: "./src/styles.css",
  buildOptions: {
    reset: true,
    minify: false
  }
};
```

--------------------------------

### Initialize Yumma CSS configuration file

Source: https://www.yummacss.com/docs/installation/installation

Create a default configuration file (yumma.config.js) in your project's root directory using the Yumma CSS CLI initialization command. This sets up the basic structure for your project's CSS configuration.

```npm
npx yummacss init
```

```pnpm
pnpx yummacss init
```

```yarn
yarn dlx yummacss init
```

--------------------------------

### Build Yumma CSS styles

Source: https://www.yummacss.com/docs/installation/installation

Generate your CSS with the Yumma CSS build command using your package manager's execution utility (npx, pnpx, or yarn dlx). This command processes your configured source files and outputs the compiled CSS to the specified path.

```npm
npx yummacss build
```

```pnpm
pnpx yummacss build
```

```yarn
yarn dlx yummacss build
```

--------------------------------

### Align Place Self to Start in Yumma CSS Grid

Source: https://www.yummacss.com/docs/installation/place-self

This example demonstrates setting the `place-self` utility to `start` in Yumma CSS. The item will be aligned to the start of its grid area.

```html
<div id="area">
<div class="d-g g-4 gtc-3 pi-st tc-white">
<div class="ai-c bg-indigo-9 d-f jc-c p-8 rad-1">A</div>
<div class="ai-c bg-indigo d-f jc-c p-8 ps-s rad-1">B</div>
<div class="ai-c bg-indigo-9 d-f jc-c p-8 rad-1">C</div>
</div>
</div>
```

--------------------------------

### Install Yumma CSS in Preact Project

Source: https://www.yummacss.com/docs/installation/guides/preact

This snippet demonstrates how to install the `yummacss` package as a development dependency using npm, pnpm, or yarn in a Preact project.

```npm
npm i yummacss -D
```

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

```yarn
yarn add yummacss -D
```

--------------------------------

### Align Place Items to Start in Yumma CSS

Source: https://www.yummacss.com/docs/installation/place-items

This example demonstrates how to set the `place-items` property to `start` using Yumma CSS utilities. Items within the container will align to the start.

```HTML
<div class="tc-white" id="area">

<div class="d-g g-4 gtc-2 h-50 pi-s">

<div class="bg-indigo d-14 d-f jc-c ai-c p-4 rad-1">A</div>

<div class="bg-indigo d-14 d-f jc-c ai-c p-4 rad-1">B</div>

<div class="bg-indigo d-14 d-f jc-c ai-c p-4 rad-1">C</div>

<div class="bg-indigo d-14 d-f jc-c ai-c p-4 rad-1">D</div>

</div>

</div>
```

--------------------------------

### Configure Yumma CSS Source and Output Paths

Source: https://www.yummacss.com/docs/installation/guides/preact

This snippet provides an example of `yumma.config.js` content, specifying source files for scanning and the output path for the generated CSS, along with build options like reset and minify.

```JavaScript
export default {
  source: ["./src/**/*.{ts,tsx}"],
  output: "./src/style.css",
  buildOptions: {
    reset: true,
    minify: false,
  }
};
```

--------------------------------

### Clone Yumma CSS Next.js Starter Project

Source: https://www.yummacss.com/docs/installation/guides/nextjs

Clones the official Yumma CSS Next.js starter repository from GitHub, providing a ready-to-use project setup.

```Shell
git clone https://github.com/yumma-lib/with-nextjs.git
```

--------------------------------

### Install Yumma CSS Development Dependency

Source: https://www.yummacss.com/docs/installation/guides/nuxtjs

Installs the `yummacss` package as a development dependency in your Nuxt.js project using npm, pnpm, or yarn package managers.

```npm
npm i yummacss -D
```

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

```yarn
yarn add yummacss -D
```

--------------------------------

### Align Place Content to Start in Yumma CSS

Source: https://www.yummacss.com/docs/installation/place-content

This example demonstrates how to align grid items to the start of their container using the `pc-s` utility class in Yumma CSS. It applies to a grid layout with two columns and four items.

```HTML
<div class="tc-white" id="area">

<div class="d-g g-4 gtc-2 h-50 pc-s">

<div class="ai-c bg-indigo d-14 d-f jc-c p-4 rad-1">A</div>

<div class="ai-c bg-indigo d-14 d-f jc-c p-4 rad-1">B</div>

<div class="ai-c bg-indigo d-14 d-f jc-c p-4 rad-1">C</div>

<div class="ai-c bg-indigo d-14 d-f jc-c p-4 rad-1">D</div>

</div>

</div>
```

--------------------------------

### Example Yumma CSS Configuration for Nuxt.js

Source: https://www.yummacss.com/docs/installation/guides/nuxtjs

Defines the `yumma.config.js` file, specifying the source files (e.g., `app.vue`), the output CSS file path, and build options like `reset` and `minify`. This configuration tells Yumma CSS where to find your styles and where to output the compiled CSS.

```JavaScript
export default {
  source: ["./app.vue"],
  output: "./assets/global.css",
  buildOptions: {
    reset: true,
    minify: false,
  }
};
```

--------------------------------

### Qwik Component with Yumma CSS Classes

Source: https://www.yummacss.com/docs/installation/guides/qwik

An example Qwik component demonstrating the usage of Yumma CSS utility classes for styling elements.

```typescript
import { component$ } from "@builder.io/qwik";

export default component$(() => {
  return (
    <div class="bg-indigo-12 d-g h-dvh pi-c tc-white">
      <h1 class="fs-3xl fw-500">Yumma CSS ⚙️ Qwik</h1>
    </div>
  );
});
```

--------------------------------

### Align Grid Items to Start with Justify Items Utility

Source: https://www.yummacss.com/docs/installation/justify-items

This example demonstrates how to use the `ji-s` utility class to align grid items to the start of their grid area along the inline axis. It applies `d-g` for display grid, `g-4` for gap, `gtc-3` for grid template columns, and `ji-s` for justify items start.

```HTML
<div class="p-r tc-white">
<div class="d-g g-4 gtc-3 ji-s" id="area">
<div class="ai-c bg-indigo d-f d-14 jc-c rad-1">A</div>
<div class="ai-c bg-indigo d-f d-14 jc-c rad-1">B</div>
<div class="ai-c bg-indigo d-f d-14 jc-c rad-1">C</div>
</div>
</div>
```

--------------------------------

### Install Yumma CSS in Qwik Project

Source: https://www.yummacss.com/docs/installation/guides/qwik

Installs the `yummacss` package as a development dependency using different package managers (npm, pnpm, or yarn).

```shell
npm i yummacss -D
```

```shell
pnpm add yummacss -D
```

```shell
yarn add yummacss -D
```

--------------------------------

### Padding Inline Start Utility

Source: https://www.yummacss.com/docs/installation/padding

Controls the logical inline start padding of an element, which maps to a physical padding depending on the element’s writing mode, directionality, and text orientation. This example sets the left padding to 2rem, providing space inside the element on the left side in a horizontal writing mode.

```html
<div id="area">

<div class="p-8">

<p class="bg-indigo tc-white pis-6">6</p>

</div>

</div>
```

--------------------------------

### Preact Component Example with Yumma CSS

Source: https://www.yummacss.com/docs/installation/guides/preact

This snippet shows a basic Preact functional component (`Home`) that utilizes Yumma CSS utility classes for styling, demonstrating how to apply them directly in JSX.

```TypeScript JSX
export function Home() {
  return (
    <div class="bg-indigo-12 d-g h-dvh pi-c tc-white">
      <h1 class="fs-3xl fw-500">Yumma CSS ⚙️ Preact</h1>
    </div>
  );
}
```

--------------------------------

### Initialize Yumma CSS configuration file

Source: https://www.yummacss.com/docs/installation/upgrade-guide

Commands to create a new Yumma CSS configuration file in your project using npx, pnpx, or yarn dlx.

```npm
npx yummacss init
```

```pnpm
pnpx yummacss init
```

```yarn
yarn dlx yummacss init
```

--------------------------------

### Block Display Utility

Source: https://www.yummacss.com/docs/installation/display

This example sets the display to block. The d-b utility makes the element a block-level element, causing it to take up the full width available and start on a new line.

```HTML
<div class="d-b ta-c tc-white">

<div class="bg-indigo mt-4 p-4 rad-1">A</div>

<div class="bg-indigo mt-4 p-4 rad-1">B</div>

<div class="bg-indigo mt-4 p-4 rad-1">C</div>

</div>
```

--------------------------------

### Install Yumma CSS in Vue.js Project

Source: https://www.yummacss.com/docs/installation/guides/vuejs

Instructions to install the `yummacss` package as a development dependency using npm, pnpm, or yarn.

```Shell
npm i yummacss -D
```

```Shell
pnpm add yummacss -D
```

```Shell
yarn add yummacss -D
```

--------------------------------

### Install Yumma CSS in Solid.js Project

Source: https://www.yummacss.com/docs/installation/guides/solidjs

Install the `yummacss` package as a development dependency using npm, pnpm, or yarn in your Solid.js project.

```shell
npm i yummacss -D
```

```shell
pnpm add yummacss -D
```

```shell
yarn add yummacss -D
```

--------------------------------

### Configure Yumma CSS source and output paths

Source: https://www.yummacss.com/docs/installation/installation

Specify the locations of your project's source files (e.g., TypeScript/TSX) that Yumma CSS should scan for utility classes, and define the desired output path for the generated CSS file. You can also configure build options like resetting default styles or minifying the output.

```JavaScript
export default {
  source: ["./src/**/*.{ts,tsx}"],
  output: "./src/styles.css",
  buildOptions: {
    reset: true,
    minify: false,
  },
};
```

--------------------------------

### Install Yumma CSS in React Project

Source: https://www.yummacss.com/docs/installation/guides/react

Install the `yummacss` package as a development dependency using npm, pnpm, or yarn.

```npm
npm i yummacss -D
```

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

```yarn
yarn add yummacss -D
```

--------------------------------

### Configure Yumma CSS for Vue.js Project

Source: https://www.yummacss.com/docs/installation/guides/vuejs

Example `yumma.config.js` file demonstrating how to specify source files, output path, and build options for a Vue.js project.

```JavaScript
export default {
  source: ["./src/**/*.vue"],
  output: "./src/assets/base.css",
  buildOptions: {
    reset: true,
    minify: false,
  }
};
```

--------------------------------

### Clone Solid.js Starter Project with Yumma CSS

Source: https://www.yummacss.com/docs/installation/guides/solidjs

Quickly set up a Solid.js project pre-configured with Yumma CSS by cloning the official starter repository.

```shell
git clone https://github.com/yumma-lib/with-solidjs.git
```

--------------------------------

### Configure Yumma CSS Output Path

Source: https://www.yummacss.com/docs/installation/first-steps

Example configuration for the 'output' option in 'yumma.config.js'. This defines the path where the compiled CSS file will be saved after processing.

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

--------------------------------

### Install Yumma CSS in Next.js Project

Source: https://www.yummacss.com/docs/installation/guides/nextjs

Installs the `yummacss` package as a development dependency using npm, pnpm, or yarn package managers.

```Shell
npm i yummacss -D
```

```Shell
pnpm add yummacss -D
```

```Shell
yarn add yummacss -D
```

--------------------------------

### Clone Yumma CSS Qwik Starter Project

Source: https://www.yummacss.com/docs/installation/guides/qwik

Clones the official Yumma CSS Qwik starter project from GitHub, allowing users to skip manual setup steps.

```shell
git clone https://github.com/yumma-lib/with-qwik.git
```

--------------------------------

### Start Text Alignment in YummaCSS

Source: https://www.yummacss.com/docs/installation/text-align

This example sets the text alignment to start. The text will be aligned to the start of the container, which is typically side-to-right languages.

```HTML
<div class="bg-indigo-1 p-4 rad-1">

<p class="bg-white fs-md p-4 rad-1 ta-s tc-lead">

Hi, Anne. It's finally springtime here on Earth! I can't stand windy or cold days, so I'm very excited for the spring. There are so many beautiful, colorful trees where I live.

I'll try to send you some pictures I took with the camera you gave me for my birthday. I've been a little under the weather lately, but I'll bounce back in no time so we can

meet up and hug each other again. I can't wait to go to the grocery store with you like we did a decade ago. I hope you feel the same way and are as excited as much as I am to

see you tomorrow night. I love you, and take care. — Vigo

</p>

</div>
```

--------------------------------

### Nuxt.js App Template with Yumma CSS Utility Classes

Source: https://www.yummacss.com/docs/installation/guides/nuxtjs

Demonstrates how to apply Yumma CSS utility classes directly within a Nuxt.js `app.vue` template. This example styles a basic `div` and `h1` element using classes like `bg-indigo-12`, `d-g`, `h-dvh`, `pi-c`, `tc-white`, `fs-3xl`, and `fw-500`.

```HTML
<template>
<div class="bg-indigo-12 d-g h-dvh pi-c tc-white">
<h1 class="fs-3xl fw-500">Yumma CSS ⚙️ Nuxt.js</h1>
</div>
</template>
```

--------------------------------

### Install Yumma CSS in Astro Project

Source: https://www.yummacss.com/docs/installation/guides/astro

Installs the 'yummacss' package as a development dependency using different package managers (npm, pnpm, or yarn).

```Bash
npm i yummacss -D
```

```Bash
pnpm add yummacss -D
```

```Bash
yarn add yummacss -D
```

--------------------------------

### Initialize Yumma CSS Configuration

Source: https://www.yummacss.com/docs/installation/guides/qwik

Creates a `yumma.config.js` configuration file in your project using the Yumma CSS CLI.

```shell
npx yummacss init
```

```shell
pnpx yummacss init
```

```shell
yarn dlx yummacss init
```

--------------------------------

### Align Justify Self to Start in Yumma CSS Grid

Source: https://www.yummacss.com/docs/installation/justify-self

This example sets the justify self to start. The item will be aligned to the start of its grid area along the inline axis.

```HTML
<div class="d-g g-4 gtc-3 tc-white" id="area">

<div class="ai-c bg-indigo d-f d-14 jc-c rad-1">A</div>

<div class="ai-c bg-indigo-8 d-f d-14 jc-c js-s rad-1">B</div>

<div class="ai-c bg-indigo d-f d-14 jc-c rad-1">C</div>

</div>
```

--------------------------------

### Example Astro Component with Yumma CSS Classes

Source: https://www.yummacss.com/docs/installation/guides/astro

Demonstrates how to integrate and use Yumma CSS utility classes within an Astro component to apply styling.

```Astro
---
import Layout from '../layouts/Layout.astro';
---
<Layout title="Welcome to Astro.">
  <div class="bg-indigo-12 d-g h-dvh pi-c tc-white">
    <h1 class="fs-3xl fw-500">Yumma CSS ⚙️ Astro</h1>
  </div>
</Layout>
```

--------------------------------

### Vue.js Component Using Yumma CSS Classes

Source: https://www.yummacss.com/docs/installation/guides/vuejs

An example Vue.js `App.vue` component demonstrating the application of Yumma CSS utility classes for styling.

```Vue.js
<template>
  <div class="bg-indigo-12 d-g h-dvh pi-c tc-white">
    <h1 class="fs-3xl fw-500">Yumma CSS ⚙️ Vue.js</h1>
  </div>
</template>
```

--------------------------------

### Align Content: Flex Start in Yumma CSS

Source: https://www.yummacss.com/docs/installation/align-content

This example sets the align content to flex-start. The items will be aligned to the start of the container.

```HTML
<div class="ac-fs d-g g-4 gtc-3 h-64 tc-white ta-c w-full" id="area">

<div class="bg-indigo p-4 rad-1">A</div>

<div class="bg-indigo p-4 rad-1">B</div>

<div class="bg-indigo p-4 rad-1">C</div>

<div class="bg-indigo p-4 rad-1">D</div>

<div class="bg-indigo p-4 rad-1">E</div>

</div>
```

--------------------------------

### Clone Yumma CSS React Starter Project

Source: https://www.yummacss.com/docs/installation/guides/react

Clone the official Yumma CSS React starter project from GitHub to quickly set up a new project without following manual installation steps.

```Bash
git clone https://github.com/yumma-lib/with-react.git
```

--------------------------------

### Basic Grid Template Columns Example

Source: https://www.yummacss.com/docs/installation/grid-template-columns

This example demonstrates setting a grid with 3 columns using the `gtc-3` utility class in Yumma CSS. Each column has a minimum size of 0 and a maximum size of 1fr, ensuring equal distribution of available space.

```HTML
<div class="d-g g-4 gtc-3 ta-c tc-white" id="area">
<div class="bg-indigo p-4 rad-1">A</div>
<div class="bg-indigo p-4 rad-1">B</div>
<div class="bg-indigo p-4 rad-1">C</div>
<div class="bg-indigo p-4 rad-1">D</div>
<div class="bg-indigo p-4 rad-1">E</div>
</div>
```

--------------------------------

### Initialize Yumma CSS CLI Project

Source: https://www.yummacss.com/docs/installation/first-steps

Commands to initialize a new Yumma CSS project using different package managers (npm, pnpm, yarn). This sets up the basic project structure and configuration.

```Shell
npx yummacss init
```

```Shell
pnpm yummacss init
```

```Shell
yarn yummacss init
```

--------------------------------

### Install Yumma CSS in Angular Project

Source: https://www.yummacss.com/docs/installation/guides/angular

Install the Yumma CSS package as a development dependency using npm, pnpm, or yarn.

```npm
npm i yummacss -D
```

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

```yarn
yarn add yummacss -D
```

--------------------------------

### Set Float to Inline Start with Yumma CSS

Source: https://www.yummacss.com/docs/installation/float

This example sets the float property to inline-start. The element will float to the start of the inline direction, which is typically the left side in left-to-right languages.

```HTML
<div class="h-14 p-r tc-white" id="area">

<div class="ai-c bg-indigo d-f d-14 fl-is jc-c rad-1">A</div>

</div>
```

--------------------------------

### Clone Svelte Starter Project with Yumma CSS

Source: https://www.yummacss.com/docs/installation/guides/svelte

Quickly set up a Svelte project pre-configured with Yumma CSS by cloning the official starter repository using Git.

```Git
git clone https://github.com/yumma-lib/with-svelte.git
```

--------------------------------

### Grid Display Utility

Source: https://www.yummacss.com/docs/installation/display

This example sets the display to grid. The d-g utility makes the element a grid container, enabling the use of grid layout properties for its children.

```HTML
<div class="d-g g-4 gtc-2 ta-c tc-white">

<div class="bg-indigo p-4 rad-1">A</div>

<div class="bg-indigo p-4 rad-1">B</div>

<div class="bg-indigo p-4 rad-1">C</div>

</div>
```

--------------------------------

### Clone Angular Starter Project with Yumma CSS

Source: https://www.yummacss.com/docs/installation/guides/angular

Quickly set up an Angular project pre-configured with Yumma CSS by cloning the official starter repository using Git.

```Shell
git clone https://github.com/yumma-lib/with-angular.git
```

--------------------------------

### Flow Root Display Utility

Source: https://www.yummacss.com/docs/installation/display

This example sets the display to flow-root. The d-fr utility creates a new block formatting context, allowing for better control of floated children.

```HTML
<div class="d-fr ta-c tc-white">

<div class="ai-c bg-indigo d-f d-18 flo-l jc-c p-a rad-1 zi-10">A</div>

<div class="h-18"></div>

</div>
```

--------------------------------

### Example Usage of YummaCSS Min-Dimension Utilities

Source: https://www.yummacss.com/docs/installation/dimension

This example demonstrates how to apply `min-d-32` and `max-d-64` utility classes to an HTML element. The `min-d-32` class ensures the element maintains a minimum size, while `max-d-64` sets its maximum allowed size, controlling its dimensions within specified bounds.

```HTML
<div class="o-auto ai-c bg-indigo d-16 d-f jc-c max-d-64 min-d-32 p-6 r-b rad-1 tc-white">32</div>
```

--------------------------------

### Configure Yumma CSS Source Paths

Source: https://www.yummacss.com/docs/installation/first-steps

Example configuration for the 'source' option in 'yumma.config.js'. This specifies an array of glob patterns for template files where the CLI will look for utility classes.

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

--------------------------------

### YummaCSS: Set Margin Inline Start

Source: https://www.yummacss.com/docs/installation/margin

Controls the logical inline start margin of an element, which maps to a physical margin depending on the element’s writing mode, directionality, and text orientation. This example sets the margin inline start to 2rem, adding space to the element's left.

```HTML
<div id="area">

<div class="ai-c bg-indigo d-f d-16 jc-c mis-8 rad-1 tc-white">8</div>

</div>
```

--------------------------------

### Flex Display Utility

Source: https://www.yummacss.com/docs/installation/display

This example sets the display to flex. The d-f utility makes the element a flex container, enabling the use of flexbox layout properties for its children.

```HTML
<div class="d-f g-4 ta-c tc-white">

<div class="ai-c bg-indigo d-b d-g d-14 jc-c p-4 rad-1">A</div>

<div class="ai-c bg-indigo d-b d-g d-14 jc-c p-4 rad-1">B</div>

<div class="ai-c bg-indigo d-b d-g d-14 jc-c p-4 rad-1">C</div>

</div>
```

--------------------------------

### Set Scroll Snap Align to Start with Yumma CSS

Source: https://www.yummacss.com/docs/installation/scroll-snap-align

This example demonstrates how to set the scroll snap align to 'start' using the `ssa-s` utility in Yumma CSS. It ensures that elements within a scroll container will snap to the start when scrolling, aligning content to the left or top of the container.

```HTML
<div class="o-h pb-4 p-r">

<div class="d-f g-6 o-x-s pb-4 sst-x-m">

<div class="fs-0 p-r ssa-s">

<div class="h-40 rad-1 w-80" id="area"></div>

</div>

<div class="fs-0 p-r ssa-s">

<img class="h-40 rad-1 w-80" src="https://picsum.photos/400/200?image=849" />

</div>

<div class="fs-0 p-r ssa-s">

<img class="h-40 rad-1 w-80" src="https://picsum.photos/400/200?image=866" />

</div>

<div class="fs-0 p-r ssa-s">

<img class="h-40 rad-1 w-80" src="https://picsum.photos/400/200?image=872" />

</div>

<div class="fs-0 p-r ssa-s">

<img class="h-40 rad-1 w-80" src="https://picsum.photos/400/200?image=875" />

</div>

<div class="fs-0 p-r ssa-s">

<div class="h-40 rad-1 w-80" id="area"></div>

</div>

</div>

</div>
```

--------------------------------

### Yumma CSS Utility Class Quick Reference

Source: https://www.yummacss.com/docs/installation/first-steps

A quick reference table mapping common CSS properties to their corresponding Yumma CSS utility classes, including hover modifiers.

```APIDOC
Property | Utility
--- | ---
background-color | `bg-*`
border-radius | `rad-*`
border-width | `b-*`
color | `tc-*`
cursor | `c-*`
font-weight | `fw-*`
padding-y — (bottom & top) | `py-*`
padding-x — (left & right) | `px-*`
hover | `h:*`
```

--------------------------------

### Define Grid Column Start Position in Yumma CSS

Source: https://www.yummacss.com/docs/installation/grid-column

This example illustrates how to use the `gcs-3` utility in Yumma CSS to set the starting grid line for a grid item within the column layout. The item will begin at the third column line, positioning it to start in the third column of the grid.

```html
<div class="d-g g-4 gcs-3 gtc-4 ta-c tc-white" id="area">

<div class="bg-indigo p-4 rad-1">A</div>

<div class="bg-indigo p-4 rad-1">B</div>

<div class="bg-indigo p-4 rad-1">C</div>

</div>
```

--------------------------------

### Padding X Utility

Source: https://www.yummacss.com/docs/installation/padding

Controls both the left and right paddings of an element at once. This example sets both left and right padding to 2rem, providing uniform space on both sides inside the element.

```html
<div id="area">

<div class="p-8">

<p class="bg-indigo tc-white px-6">6</p>

</div>

</div>
```

--------------------------------

### Initialize Yumma CSS Configuration File

Source: https://www.yummacss.com/docs/installation/guides/preact

This snippet shows how to create the `yumma.config.js` configuration file in your project using the `init` command via npx, pnpx, or yarn dlx.

```npm
npx yummacss init
```

```pnpm
pnpx yummacss init
```

```yarn
yarn dlx yummacss init
```

--------------------------------

### Padding Y Utility

Source: https://www.yummacss.com/docs/installation/padding

Controls both the bottom and top paddings of an element at once. This example sets both bottom and top padding to 2rem, providing uniform space above and below its content.

```html
<div id="area">

<div class="p-8">

<p class="bg-indigo tc-white py-6">6</p>

</div>

</div>
```

--------------------------------

### Build Yumma CSS Styles

Source: https://www.yummacss.com/docs/installation/first-steps

Commands to compile Yumma CSS files once using different package managers (npm, pnpm, yarn). Requires a 'yumma.config.js' file to be set up.

```Shell
npx yummacss build
```

```Shell
pnpm yummacss build
```

```Shell
yarn yummacss build
```

--------------------------------

### Set Text Indent to 0px

Source: https://www.yummacss.com/docs/installation/text-indent

This example sets the text indent to 0px. The text will have no indentation at the start of the paragraph.

```HTML
<div class="bg-indigo-1 p-4 rad-1">

<p class="bg-white fs-lg p-4 rad-1 tc-lead ti-0">Sphinx of black quartz, judge my vow.</p>

</div>
```

--------------------------------

### Initialize Yumma CSS Configuration File

Source: https://www.yummacss.com/docs/installation/guides/solidjs

Create a `yumma.config.js` configuration file in your Solid.js project using the Yumma CSS CLI initialization command.

```shell
npx yummacss init
```

```shell
pnpx yummacss init
```

```shell
yarn dlx yummacss init
```

--------------------------------

### Align Items: Flex Start Alignment in HTML

Source: https://www.yummacss.com/docs/installation/align-items

This example demonstrates how to set the `align-items` property to `flex-start` using Yumma CSS utility classes. Items within the flex or grid container will be aligned to the start of the container's transverse axis.

```HTML
<div class="ai-fs d-g g-4 gtc-3 h-64 tc-white ta-c w-full" id="area">
<div class="bg-indigo p-4 rad-1">A</div>
<div class="bg-indigo p-4 rad-1">B</div>
<div class="bg-indigo p-4 rad-1">C</div>
<div class="bg-indigo p-4 rad-1">D</div>
<div class="bg-indigo p-4 rad-1">E</div>
</div>
```

--------------------------------

### Example Svelte Component with Yumma CSS Classes

Source: https://www.yummacss.com/docs/installation/guides/svelte

Demonstrates how to apply Yumma CSS utility classes directly within the HTML markup of a Svelte component.

```Svelte
<h1 class="fs-sm fw-700 ta-c tc-indigo">Yumma CSS 🤝 Svelte</h1>
```

--------------------------------

### Set Text Indent to 0.75rem

Source: https://www.yummacss.com/docs/installation/text-indent

This example sets the text indent to 0.75rem. The text will be indented more significantly at the start of the paragraph.

```HTML
<div class="bg-indigo-1 p-4 rad-1">

<p class="bg-white fs-lg p-4 rad-1 tc-lead ti-4">Sphinx of black quartz, judge my vow.</p>

</div>
```

--------------------------------

### Clone Vue.js Starter Project with Yumma CSS

Source: https://www.yummacss.com/docs/installation/guides/vuejs

Command to clone the pre-configured Vue.js starter project that includes Yumma CSS.

```Shell
git clone https://github.com/yumma-lib/with-vuejs.git
```

--------------------------------

### Set Text Indent to 0.5rem

Source: https://www.yummacss.com/docs/installation/text-indent

This example sets the text indent to 0.5rem. The text will be indented moderately at the start of the paragraph.

```HTML
<div class="bg-indigo-1 p-4 rad-1">

<p class="bg-white fs-lg p-4 rad-1 tc-lead ti-3">Sphinx of black quartz, judge my vow.</p>

</div>
```

--------------------------------

### Set Text Indent to 1px

Source: https://www.yummacss.com/docs/installation/text-indent

This example sets the text indent to 1px. The text will be indented slightly at the start of the paragraph.

```HTML
<div class="bg-indigo-1 p-4 rad-1">

<p class="bg-white fs-lg p-4 rad-1 tc-lead ti-1">Sphinx of black quartz, judge my vow.</p>

</div>
```

--------------------------------

### Initialize Yumma CSS Configuration File

Source: https://www.yummacss.com/docs/installation/guides/react

Create a `yumma.config.js` configuration file in your project using npx, pnpx, or yarn dlx.

```npm
npx yummacss init
```

```pnpm
pnpx yummacss init
```

```yarn
yarn dlx yummacss init
```

--------------------------------

### Align Self: Flex-Start Alignment in HTML

Source: https://www.yummacss.com/docs/installation/align-self

This example sets the align self to flex-start. The item will be aligned to the start of its container.

```HTML
<div class="tc-white">
<div class="d-f g-4 h-24 w-full" id="area">
<div class="ai-c bg-indigo-8 d-f f-1 jc-c p-4 rad-1">A</div>
<div class="ai-c as-fs bg-indigo d-f f-1 jc-c p-4 rad-1">B</div>
<div class="ai-c bg-indigo-8 d-f f-1 jc-c p-4 rad-1">C</div>
</div>
</div>
```

--------------------------------

### Initialize Yumma CSS Configuration File

Source: https://www.yummacss.com/docs/installation/guides/nuxtjs

Creates a `yumma.config.js` configuration file in your project root, which is essential for defining Yumma CSS settings. This is done using the `init` command via npx, pnpx, or yarn dlx.

```npm
npx yummacss init
```

```pnpm
pnpx yummacss init
```

```yarn
yarn dlx yummacss init
```

--------------------------------

### Control Grid Row Start Position in HTML with Yumma CSS

Source: https://www.yummacss.com/docs/installation/grid-row

This example illustrates how to set the grid item to begin at the third row line using the `grs-2` utility class in Yumma CSS. This positions the item to start in the third row of the grid.

```HTML
<div class="p-r">

<div class="d-g g-4 gaf-c gtr-3 ta-c tc-white" id="area">

<div class="ai-c bg-indigo d-f d-g gr-s-2 grs-2 jc-c p-4 rad-1">A</div>

<div class="ai-c bg-indigo-8 d-f d-g gre-4 grs-1 jc-c p-4 rad-1">B</div>

<div class="ai-c bg-indigo-8 d-f d-g gre-4 grs-1 jc-c p-4 rad-1">C</div>

</div>

</div>
```

--------------------------------

### Clear Property: Inline Start (cl-is) in Yumma CSS

Source: https://www.yummacss.com/docs/installation/clear

This example sets the clear property to inline-start. The cl-is utility ensures that the element is moved below any floating elements on the inline start side, which is typically the left side in left-to-right layouts.

```html
<div class="bg-indigo d-32 fl-l rad-1"></div>

<div class="cl-is p-6" id="area"></div>
```

--------------------------------

### Configure Yumma CSS for ES Modules

Source: https://www.yummacss.com/docs/installation/first-steps

Configuration for Yumma CSS when using ES Modules. This involves setting up 'yumma.config.js' with 'source', 'output', and 'buildOptions', and ensuring 'package.json' specifies '"type": "module"'.

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

```JSON
{
  "type": "module"
}
```

--------------------------------

### Set Text Indent to 0.25rem

Source: https://www.yummacss.com/docs/installation/text-indent

This example sets the text indent to 0.25rem. The text will be indented a small amount at the start of the paragraph.

```HTML
<div class="bg-indigo-1 p-4 rad-1">

<p class="bg-white fs-lg p-4 rad-1 tc-lead ti-2">Sphinx of black quartz, judge my vow.</p>

</div>
```

--------------------------------

### Remove old Yumma CSS import statements

Source: https://www.yummacss.com/docs/installation/upgrade-guide

Example of old @import statements for Yumma CSS that should be removed from your CSS files when upgrading to v3.

```CSS
@import "yummacss/dist/yumma.min.css";

@import "yummacss/dist/yumma.css";
```

--------------------------------

### Build Yumma CSS Styles

Source: https://www.yummacss.com/docs/installation/guides/qwik

Generates the CSS output based on the configuration using the Yumma CSS build command with different package managers.

```shell
npx yummacss build
```

```shell
pnpx yummacss build
```

```shell
yarn dlx yummacss build
```

--------------------------------

### Configure Yumma CSS for CommonJS

Source: https://www.yummacss.com/docs/installation/first-steps

Configuration for Yumma CSS when using CommonJS. This involves setting up 'yumma.config.js' with 'module.exports' for 'source', 'output', and 'buildOptions'.

```JavaScript
module.exports = {
  source: ["..."],
  output: "...",
  buildOptions: {
    reset: true,
    minify: false,
  },
};
```

--------------------------------

### Set Logical Block Start Padding with Yumma CSS

Source: https://www.yummacss.com/docs/installation/padding

This example shows how to control the logical block start padding of an element using the `pbs-6` utility class in Yumma CSS. This maps to a physical padding (e.g., top) depending on the element’s writing mode, directionality, and text orientation, setting it to 2rem.

```HTML
<div id="area">

<div class="p-8">

<p class="bg-indigo tc-white pbs-6">6</p>

</div>

</div>
```

--------------------------------

### Initialize Yumma CSS Configuration File

Source: https://www.yummacss.com/docs/installation/guides/astro

Creates a 'yumma.config.js' configuration file in your project using the 'yummacss' CLI initialization command.

```Bash
npx yummacss init
```

```Bash
pnpx yummacss init
```

```Bash
yarn dlx yummacss init
```

--------------------------------

### Set Logical Block Start Margin with Yumma CSS

Source: https://www.yummacss.com/docs/installation/margin

This example sets the logical block start margin of an element to 2rem using the `mbs-8` utility class in Yumma CSS. This margin maps to a physical margin based on the element's writing mode and directionality, typically appearing above the element in a left-to-right, top-to-bottom context.

```html
<div class="d-f fd-r" id="area">

<div class="ai-c bg-indigo d-f d-16 jc-c mbs-8 rad-1 t-8 tc-white">8</div>

</div>
```

--------------------------------

### Flex Start Justify Content in HTML with Yumma CSS

Source: https://www.yummacss.com/docs/installation/justify-content

This example sets the justify content to `flex-start`. The items will be aligned to the start of the container along the main axis. It uses Yumma CSS classes like `d-f` for display flex, `g-4` for gap, `jc-fs` for justify-content flex-start, and `tc-white` for text color white.

```HTML
<div class="d-f g-4 jc-fs tc-white" id="area">

<div class="ai-c bg-indigo d-f d-14 jc-c p-4 rad-1">A</div>

<div class="ai-c bg-indigo d-f d-14 jc-c p-4 rad-1">B</div>

<div class="ai-c bg-indigo d-f d-14 jc-c p-4 rad-1">C</div>

</div>
```

--------------------------------

### Yumma CSS Responsive Breakpoints Reference

Source: https://www.yummacss.com/docs/installation/first-steps

A reference table detailing the minimum width for each responsive breakpoint designation (`sm`, `md`, `lg`, `xl`, `xxl`) used in Yumma CSS.

```APIDOC
Designation | Minimum width
--- | ---
sm | 40rem (*640px*)
md | 48rem (*768px*)
lg | 64rem (*1024px*)
xl | 80rem (*1280px*)
xxl | 96rem (*1536px*)
```

--------------------------------

### Build Yumma CSS styles using CLI

Source: https://www.yummacss.com/docs/installation/upgrade-guide

Commands to generate CSS files using the Yumma CSS CLI build command, with options for npm, pnpm, or yarn.

```npm
npx yummacss build
```

```pnpm
pnpx yummacss build
```

```yarn
yarn dlx yummacss build
```

--------------------------------

### Align Content Space Between Example in YummaCSS

Source: https://www.yummacss.com/docs/installation/align-content

Demonstrates how to use `ac-sb` (align-content: space-between) in YummaCSS to distribute items evenly within a container, with the first item at the start and the last item at the end.

```HTML
<div class="ac-sb d-g g-4 gtc-3 h-64 tc-white ta-c w-full" id="area">

<div class="bg-indigo p-4 rad-1">A</div>

<div class="bg-indigo p-4 rad-1">B</div>

<div class="bg-indigo p-4 rad-1">C</div>

<div class="bg-indigo p-4 rad-1">D</div>

<div class="bg-indigo p-4 rad-1">E</div>

</div>
```

--------------------------------

### Configure Yumma CSS Source and Output Paths

Source: https://www.yummacss.com/docs/installation/guides/qwik

Specifies the locations of all project files for scanning and the output path for the generated CSS in the `yumma.config.js` configuration file.

```javascript
export default {
  source: ["./src/**/*.{ts,tsx}"],
  output: "./src/global.css",
  buildOptions: {
    reset: true,
    minify: false,
  }
};
```

--------------------------------

### Distribute Place Content with Space Between in Yumma CSS

Source: https://www.yummacss.com/docs/installation/place-content

This example demonstrates how to distribute grid items evenly with the first at the start and last at the end of their container using the `pc-sb` utility class in Yumma CSS. It applies to a grid layout with two columns and four items.

```HTML
<div class="tc-white" id="area">

<div class="d-g g-4 gtc-2 h-50 pc-sb">

<div class="ai-c bg-indigo d-14 d-f jc-c p-4 rad-1">A</div>

<div class="ai-c bg-indigo d-14 d-f jc-c p-4 rad-1">B</div>

<div class="ai-c bg-indigo d-14 d-f jc-c p-4 rad-1">C</div>

<div class="ai-c bg-indigo d-14 d-f jc-c p-4 rad-1">D</div>

</div>

</div>
```

--------------------------------

### Initialize Yumma CSS Configuration in Next.js

Source: https://www.yummacss.com/docs/installation/guides/nextjs

Creates a `yumma.config.js` configuration file in your project's root directory using the Yumma CSS CLI initialization command.

```Shell
npx yummacss init
```

```Shell
pnpx yummacss init
```

```Shell
yarn dlx yummacss init
```

--------------------------------

### Apply Grid Column Span in Yumma CSS

Source: https://www.yummacss.com/docs/installation/grid-column

This example demonstrates how to use the `gc-s-2` utility in Yumma CSS to make a grid item span 2 columns. The item will occupy 2 columns starting from its current position, effectively spanning across 2 columns.

```html
<div class="d-g g-4 gtc-3 ta-c tc-white" id="area">

<div class="bg-indigo gc-s-2 p-4 rad-1">A</div>

<div class="bg-indigo-8 p-4 rad-1">B</div>

<div class="bg-indigo-8 p-4 rad-1">C</div>

<div class="bg-indigo gc-s-2 p-4 rad-1">D</div>

</div>
```

--------------------------------

### HTML Example: Applying Flex Basis Utilities

Source: https://www.yummacss.com/docs/installation/flex-basis

This HTML snippet demonstrates the application of various `flex-basis` utilities within a flex container. It showcases `fb-0` for no initial size, `fb-50` for a base size of 12.5rem, and `fb-full` for 100% width, illustrating how these utilities control the initial sizing of flex items.

```HTML
<div class="tc-white" id="area">

<div class="d-f g-4 h-24 w-full">

<div class="ai-c bg-indigo d-f fb-0 jc-c p-4 rad-1">A</div>

<div class="ai-c bg-indigo d-f fb-50 jc-c p-4 rad-1">B</div>

<div class="ai-c bg-indigo d-f fb-full jc-c p-4 rad-1">C</div>

</div>

</div>
```

--------------------------------

### Apply Place Items with Hover Modifier in Yumma CSS

Source: https://www.yummacss.com/docs/installation/place-items

This example shows how to apply `place-items` utilities conditionally based on hover states using the `h:-*` utility in Yumma CSS. The `pi-s` class applies `place-items: start` by default, which is overridden to `pi-e` (place-items: end) on hover.

```HTML
<div class="pi-s h:pi-e ..."></div>
```

--------------------------------

### Style HTML Button with Yumma CSS Utility Classes

Source: https://www.yummacss.com/docs/installation/first-steps

This example shows how to style a button using Yumma CSS's utility-first approach. It applies styles directly via abbreviated inline classes for background, border-radius, text color, font weight, padding, and hover effects.

```HTML
<button class="bg-indigo rad-1 b-0 tc-white c-p fw-600 py-1 px-5 h:bg-indigo-8">
Subscribe
</button>
```

--------------------------------

### Example Solid.js Component with Yumma CSS Classes

Source: https://www.yummacss.com/docs/installation/guides/solidjs

Demonstrates how to apply Yumma CSS utility classes directly within a Solid.js component's JSX for styling elements.

```javascript
function App() {
  return (
    <div class="bg-indigo-12 d-g h-dvh pi-c tc-white">
      <h1 class="fs-3xl fw-500">Yumma CSS ⚙️ Solid.js</h1>
    </div>
  );
}

export default App;
```

--------------------------------

### Control Grid Row End Position in HTML with Yumma CSS

Source: https://www.yummacss.com/docs/installation/grid-row

This example shows how to set the grid item to end at the third row line using the `gre-3` utility class in Yumma CSS. The item will end at the specified row line, effectively spanning from its starting position to that line.

```HTML
<div class="p-r">

<div class="d-g g-4 gaf-c gtr-3 ta-c tc-white" id="area">

<div class="ai-c bg-indigo d-f d-g gr-s-2 gre-3 jc-c p-4 rad-1">A</div>

<div class="ai-c bg-indigo-8 d-f d-g gre-4 grs-1 jc-c p-4 rad-1">B</div>

<div class="ai-c bg-indigo-8 d-f d-g gre-4 grs-1 jc-c p-4 rad-1">C</div>

</div>

</div>
```

--------------------------------

### Build Yumma CSS Styles

Source: https://www.yummacss.com/docs/installation/guides/preact

This snippet demonstrates how to generate your CSS using the `build` command of Yumma CSS via npx, pnpx, or yarn dlx, after configuring the source and output paths.

```npm
npx yummacss build
```

```pnpm
pnpx yummacss build
```

```yarn
yarn dlx yummacss build
```

--------------------------------

### Set Grid Row Span in HTML with Yumma CSS

Source: https://www.yummacss.com/docs/installation/grid-row

This example demonstrates how to set the grid row to span 2 rows using the `gr-s-2` utility class in Yumma CSS. The item will span across 2 rows, starting from its current position and occupying the next 2 rows in the grid.

```HTML
<div class="d-g g-4 gtc-3 h-75 ta-c tc-white" id="area">

<div class="ai-c bg-indigo gr-s-2 d-f jc-c p-4 rad-1">A</div>

<div class="ai-c bg-indigo-8 d-f jc-c p-4 rad-1">B</div>

<div class="ai-c bg-indigo-8 d-f jc-c p-4 rad-1">C</div>

<div class="ai-c bg-indigo-8 d-f jc-c p-4 rad-1">D</div>

<div class="ai-c bg-indigo-8 d-f jc-c p-4 rad-1">E</div>

</div>
```

--------------------------------

### Build Yumma CSS Styles for Solid.js Project

Source: https://www.yummacss.com/docs/installation/guides/solidjs

Generate your CSS styles using the Yumma CSS `build` command, which processes your source files based on the configuration.

```shell
npx yummacss build
```

```shell
pnpx yummacss build
```

```shell
yarn dlx yummacss build
```