My Tailwind Utilties

utilities.less

/* Blend Modes
  ========================================================================== */
.mix-overlay { mix-blend-mode: overlay; }
.mix-multiply { mix-blend-mode: multiply; }
.mix-screen { mix-blend-mode: screen; }
.mix-lighten { mix-blend-mode: lighten; }
.mix-soft-light { mix-blend-mode: soft-light; }
.mix-difference { mix-blend-mode: difference; }
.mix-color { mix-blend-mode: color; }


/* Filters
  ========================================================================== */
@variants hover, group-hover {
    .grayscale-100 { filter: grayscale(100%); }
    .grayscale-0 { filter: grayscale(0%); }
}


/* Object Fit
   ========================================================================== */
.fit-cover { object-fit: cover; }
.fit-contain { object-fit: contain; }


/* Position
   ========================================================================== */
.sticky { position: sticky; }


/* Visibility
   ========================================================================== */
[v-cloak] { display: none; }