Tailwind scrim utilities

GitHub npm

There have been prior attempts at creating these utilities, but I wanted to prioritise composability with the defined theme scales, and leverage modern browser support to address points of frustration.

This 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, where a single pseudo-element uses mask-image to reveal the underlying content. An additive approach would reveal stacking issues when opacity modifiers are applied.

npm i -D tailwindcss-scrim-gradients

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