The Problem
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.
The Solution
@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.
What's Inside
- glass-sm / glass-md / glass-lg — three depth levels of the frosted effect
- CSS-variable driven — retheme globally, not per-component
- Dark-mode friendly — tints and borders adjust with your palette
- Zero runtime — compiles down to plain utilities at build time
Why It's Worth It
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.
