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)

Misc

• cursor-{pointer|default|help|wait|grab|grabbing|not-allowed}
• isolate, isolate-auto
• mask-shape, mask-inline, mask-block