# Glassmorphism Is Back — and This Tailwind Plugin Makes It Painless

> Source: <https://dev.to/3ni8ma/glassmorphism-is-back-and-this-tailwind-plugin-makes-it-painless-3hn8>
> Published: 2026-08-16 22:59:13+00:00

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](https://github.com/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:

``` js
// 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](https://www.npmjs.com/package/@3ni8ma/tailwind-plugin) and takes one line to install.