Blog/August 19, 2025

Yumma CSS 3.2

Today, we are releasing Yumma CSS 3.2. This update introduces box model, border radius, and color utilities, along with size values from the breakpoint system.

Renildo Pereira

This update shouldn't be difficult to upgrade, but you may want to check out the release notes before upgrading.

New utility variants

New values have just arrived for the box model and border radius utilities.

New Box Model pixel values

Use px to set the dimension, height, or width of an element to 1px.

<div class="d-px ..."></div>
<div class="h-px ..."></div>
<div class="w-px ..."></div>

Use px to set the padding of an element to 1px. Applies to all logical and physical margin and padding utilities.

<div class="m-px"></div>
<div class="p-px"></div>

New Margin and Padding viewport units

We're also adding viewport-percentage length units utilities:

Use the *-dvw unit to apply 100dvw to an element.
Use the *-vh unit to apply 100vh to an element.
Use the *-vw unit to apply 100vw to an element.

<div class="d-dvw ..."></div>
<div class="h-vh ..."></div>
<div class="w-vw ..."></div>

New size utility values

Using the 0-100 range scale has its limitations with utilities like Dimension, Height, and Width. That's why we're adding size value options directly from our breakpoint system.

Class	Value
`*-sm`	`40rem`
`*-md`	`48rem`
`*-lg`	`64rem`
`*-xl`	`80rem`
`*-xxl`	`96rem`

New Border Radius utilities

Use the 9 value in the rad-* utilities to apply a border-radius of 9999px to an element for perfectly rounded corners.

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

Renaming Lead to Slate

We're renaming the lead color utility to slate. This is a more accurate representation of the color and its intended use.

You can easily find and replace all instances of -lead with -slate with your editor's find and replace feature.

<div class="bg-lead ..."></div>
<div class="bg-slate ..."></div>

New currentColor color variant

All color utilities now support the currentColor value. This is super useful for creating themeable UI components.

Use *-current to apply the currentColor value to a utility. This will make the child element color inherit the color of its parent element.

<div class="tc-blue">
  <svg class="h-10 w-10 f-current" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
    <circle cx="8" cy="8" r="8" />
  </svg>
</div>

Upgrade

You can get the latest version of Yumma CSS from npm:

pnpm up yummacss