Frosted-glass UI is everywhere again — every dashboard, every AI chat sidebar, every "spatial" web app. But hand-rolling the effect means repeating the same four-line blur recipe in every component:
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 12px;
And the moment a design system has three glass variants, those four lines mutate into a maintenance problem.
@3ni8ma/tailwind-plugin turns the glass recipe into design tokens you can apply anywhere:
<div class="glass-sm">Subtle frosted panel</div>
<div class="glass-md">Standard glass card</div>
<div class="glass-lg">Heavy blur, strong border</div>
Add the plugin to your Tailwind config:
// tailwind.config.js
module.exports = {
plugins: [require('@3ni8ma/tailwind-plugin')],
}
Every glass-*
utility is backed by CSS variables, so you can retheme the entire glass layer from one place — blur radius, border opacity, tint, everything.
Consistency. The whole point of a design system is that "glass" means one thing everywhere. This plugin makes the glass recipe a named concept instead of a copy-paste ritual — and when the design changes, you change the tokens, not fifty components.
If your project leans into frosted surfaces, it's on npm and takes one line to install.