Blog/February 5, 2026

Yumma CSS 3.11

Yumma CSS v3.11 is here with new transition property utilities for height and width, making it easier than ever to animate dimensions.

This update might change existing features, make sure you check out the release notes before upgrading.

New transition properties

This release focuses on expanding our transitions system with three new utility properties specifically designed for animating element dimensions.

You can now target them specifically for better performance and control.

We've added three new prefixes to the tp-* (transition-property) category:

Prefix	Property
`tp-h`	`transition-property: height;`
`tp-w`	`transition-property: width;`
`tp-d`	`transition-property: height, width;`

These utilities are perfect for accordions, dropdowns, or any component that needs to smoothly change size.

<!-- Height and width transition -->
<div class="h-16 w-16 tp-d td-300 tdu-300 ttf-io h:h-32 h:w-32 ..."></div>

If you only need to animate one axis, you can use the more specific utilities:

<!-- Only height -->
<div class="tp-h h:h-64 ..."></div>

<!-- Only width -->
<div class="tp-w h:w-64 ..."></div>

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

pnpm install yummacss@latest