Tailwind scrim utilities

GitHub npm

A scrim is a semi-transparent overlay, used typically to emphasise foreground by reducing the visual prominence of background interface. These utilities prioritise composability with user defined theme scales, leveraging modern browser support not available to earlier solutions.

The gradient uses hard-coded colour stops to ease the opacity gradation, and subdue the appearance of sharp edges and luminance banding.

Shorthand utilities are included to produce scrims on an axis, as well as classes for any individual edge. This uses the same approach to composability as Tailwind itself, in assembling a series of variables set by the utility classes. Lengths can therefore be assigned and overridden on each side.

Seamless composition is made possible through a subtractive implementation, in which a single pseudo-element uses mask-image to reveal the underlying content. An additive approach would reveal stacking issues when opacity modifiers are applied.

Multi-color scrims may be produced through composition of DOM nodes, or by applying a gradient background directly to the pseudo-element.

<!-- Define a color on the parent node -->
<div class='scrim-red-500 scrim-t-40'>
	<!-- And apply a new scrim in a child -->
	<div class='scrim-yellow-500 scrim-b-1/2' />
</div>

npm i -D tailwindcss-scrim-gradients

/* global.css – v4 */
@plugin "tailwindcss-scrim-gradients";

// tailwind.config.js – v3
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require("tailwindcss-scrim-gradients"),
    // ...
  ],
};