Effects

Filters

<img class="filter-grayscale" src="/photo.jpg" alt="" />
<img class="filter-brightness-75 filter-contrast-200" src="/photo.jpg" alt="" />

• filter-invert
• filter-grayscale · filter-grayscale-{0|25|50|75}
• filter-sepia · filter-sepia-{0|25|50|75|200}
• filter-saturate · filter-saturate-{0|25|50|75|200}
• filter-brightness · filter-brightness-{0|25|50|75|200}
• filter-contrast · filter-contrast-{0|25|50|75|200}
• filter-hue-rotate-{0|15|30|45|60|90|180|270}

Transforms

Responsive variants available ({util}-{breakpoint}-{value}):

• rotate-{0|45|90|135|180|225|270|315|360}
• translate-x-{step} / translate-y-{step}, with negatives translate-x--{step}
• scale-{0|1|2|3|4|5} (0, 0.25, 0.5, 0.75, 1, 1.25)

<div class="rotate-45 scale-4">…</div>

Opacity & blend modes

• opacity-{0–100} (steps of 10)
• mix-blend-{normal|multiply|screen|overlay|darken|lighten|color-dodge|color-burn|hard-light|soft-light|difference|exclusion|hue|saturation|color|luminosity}

Aspect ratio

aspect-{auto|square|1x1|video|16x9|portrait|cinema|4x3|3x2|2x1}:

<img class="aspect-video" src="/cover.jpg" alt="" />

Scroll & overflow

• Overflow: overflow-{hidden|visible|auto|scroll|clip} and axis overflow-x-* / overflow-y-*
• Overscroll: overscroll-{auto|contain|none} (and -x / -y)
• Scroll containers: inline-scroll, block-scroll
• Effects: scrollbar-custom (thin themed scrollbar), scroll-fade-block-effect / scroll-fade-inline-effect (edge fade driven by scroll position)

Transitions

Classes for Vue's <Transition> and <TransitionGroup>. Pass the name and Vue adds the classes:

<Transition name="fade" mode="out-in">
  <span v-if="selected.length" key="selected">{{ selected.length }} selected</span>
  <span v-else key="hint">Select rows to act on them</span>
</Transition>

Lists

list also moves the items that stay. Reordered items slide to their new place, and an item that leaves collapses as it fades, so the ones below close the gap instead of jumping. It works in any list layout, including the grid of .list-group. Browsers without interpolate-size skip the collapse and close the gap once the item is gone.

<TransitionGroup name="list" tag="ul" class="list-group">
  <li v-for="item in items" :key="item.id" class="list-group-item">…</li>
</TransitionGroup>

Nuxt pages and layouts

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    pageTransition: { name: 'page', mode: 'out-in' },
    layoutTransition: { name: 'layout', mode: 'out-in' },
  },
})

Use these or Nuxt's experimental.viewTransition, not both: each animates the same navigation.

Transition CSS variables

Set them on :root, or on a wrapper to change only the transitions inside it:

.drawer {
  --cffy-transition-distance: var(--cffy-space-32);
  --cffy-transition-enter-duration: var(--cffy-duration-400);
}

With reduced motion, every transition keeps its fade but drops the movement and scaling. The classes sit in a cascade layer, so your own unlayered rules for the same names win, and any other name works with your own CSS as usual.

Misc

• cursor-{pointer|default|help|wait|grab|grabbing|not-allowed}
• isolate, isolate-auto
• mask-shape with one of shape-bum, shape-arch, shape-pill, shape-sunny, shape-gem, shape-cookie-6, shape-cookie-9, shape-cookie-12, shape-clover-4, shape-clover-8 clips an element to that shape; shape-stretch scales the shape to 115%. UiAvatar's maskShape uses the same shapes.
• mask-inline, mask-block: fade the inline end or the bottom edge