{"slug": "glassmorphism-is-back-and-this-tailwind-plugin-makes-it-painless", "title": "Glassmorphism Is Back — and This Tailwind Plugin Makes It Painless", "summary": "A developer released @3ni8ma/tailwind-plugin, a Tailwind CSS plugin that turns the frosted-glass UI effect into reusable design tokens. The plugin provides glass-sm, glass-md, and glass-lg utility classes backed by CSS variables, allowing developers to apply consistent glassmorphism styling and retheme the entire glass layer from a single configuration point.", "body_md": "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:\n\n```\nbackground: rgba(255, 255, 255, 0.08);\nbackdrop-filter: blur(12px);\nborder: 1px solid rgba(255, 255, 255, 0.12);\nborder-radius: 12px;\n```\n\nAnd the moment a design system has three glass variants, those four lines mutate into a maintenance problem.\n\n[@3ni8ma/tailwind-plugin](https://github.com/3ni8ma/tailwind-plugin) turns the glass recipe into design tokens you can apply anywhere:\n\n```\n<div class=\"glass-sm\">Subtle frosted panel</div>\n<div class=\"glass-md\">Standard glass card</div>\n<div class=\"glass-lg\">Heavy blur, strong border</div>\n```\n\nAdd the plugin to your Tailwind config:\n\n``` js\n// tailwind.config.js\nmodule.exports = {\n  plugins: [require('@3ni8ma/tailwind-plugin')],\n}\n```\n\nEvery `glass-*`\n\nutility is backed by CSS variables, so you can retheme the entire glass layer from one place — blur radius, border opacity, tint, everything.\n\nConsistency. 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.\n\nIf your project leans into frosted surfaces, it's on [npm](https://www.npmjs.com/package/@3ni8ma/tailwind-plugin) and takes one line to install.", "url": "https://wpnews.pro/news/glassmorphism-is-back-and-this-tailwind-plugin-makes-it-painless", "canonical_source": "https://dev.to/3ni8ma/glassmorphism-is-back-and-this-tailwind-plugin-makes-it-painless-3hn8", "published_at": "2026-08-16 22:59:13+00:00", "updated_at": "2026-08-16 23:41:57.673687+00:00", "lang": "en", "topics": ["developer-tools"], "entities": ["@3ni8ma/tailwind-plugin", "Tailwind CSS"], "alternates": {"html": "https://wpnews.pro/news/glassmorphism-is-back-and-this-tailwind-plugin-makes-it-painless", "markdown": "https://wpnews.pro/news/glassmorphism-is-back-and-this-tailwind-plugin-makes-it-painless.md", "text": "https://wpnews.pro/news/glassmorphism-is-back-and-this-tailwind-plugin-makes-it-painless.txt", "jsonld": "https://wpnews.pro/news/glassmorphism-is-back-and-this-tailwind-plugin-makes-it-painless.jsonld"}}