Yumma CSS 3.2

New utility variants

New values are now available for box model & border radius utilities.

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 or margin of an element to 1px.

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

Box model viewport units

Yumma CSS v3.2 adds viewport-percentage length units:

• (value)-dvw: Apply 100dvw to an element.
• (value)-vh: Apply 100vh to an element.
• (value)-vw: Apply 100vw to an element.

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

Size utility values

The 0-100 range scale has limitations for Dimension, Height, & Width. This release adds size values directly from the breakpoint system.

Border radius utilities

Use 9 in rad-(value) utilities to apply a border-radius of 9999px for perfectly rounded corners.

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

Slate color utility

The lead color utility is renamed to slate for better accuracy. Find & replace all instances of -lead with -slate in your project.

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

New currentColor variant

All color utilities now support the currentColor value via the (value)-current utility, making it easier to build themeable components.

<div class="tc-blue">
  <svg
    class="w-10 h-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

Check the Upgrading Guide for a full list of utility renames & removals.

pnpm up yummacss@latest