eslint-plugin-no-backdrop-blur

ESLint plugin to disallow Tailwind backdrop-blur-* classes, except backdrop-blur-none and backdrop-blur-0.

Why?

The CSS backdrop-filter: blur() property (used by Tailwind's backdrop-blur-* utilities) can cause significant performance issues, especially on:

• Low-powered devices (mobile phones, older computers)
• Pages with complex layouts or many DOM elements
• Scrollable areas where the blur effect needs constant recalculation

The blur effect forces the browser to repeatedly composite and repaint layers behind the element, which is GPU-intensive and can lead to:

• Janky scrolling
• Dropped frames
• Increased battery consumption
• UI lag and unresponsiveness

This plugin helps you catch accidental usage of backdrop-blur-* classes during development, encouraging the use of alternative design patterns that don't impact performance.

Installation

npm install eslint-plugin-no-backdrop-blur --save-dev

Usage

ESLint Flat Config (eslint.config.js) - ESLint v9+

import noBackdropBlur from "eslint-plugin-no-backdrop-blur";

export default [
  {
    plugins: {
      "no-backdrop-blur": noBackdropBlur,
    },
    rules: {
      "no-backdrop-blur/no-backdrop-blur": "error",
    },
  },
];

Legacy ESLint Config (.eslintrc) - ESLint v8 and below

{
  "plugins": ["no-backdrop-blur"],
  "rules": {
    "no-backdrop-blur/no-backdrop-blur": "error"
  }
}

Rule Details

This rule disallows the use of Tailwind's backdrop-blur-* utility classes, with the exception of:

• backdrop-blur-none - Explicitly disables backdrop blur
• backdrop-blur-0 - Equivalent to no blur

Examples

Invalid:

<div className="backdrop-blur-sm">...</div>
<div className="backdrop-blur-md">...</div>
<div className="backdrop-blur-lg">...</div>
<div className={`backdrop-blur-${size}`}>...</div>

Alternatives to backdrop-blur

Instead of using backdrop-blur, consider these performant alternatives:

• Semi-transparent backgrounds: bg-white/80 or bg-black/50
• Solid backgrounds with opacity: bg-gray-100 opacity-90
• Pre-blurred background images: Apply blur at build time to static images
• CSS blur() on the element itself (not backdrop): Less expensive when applied to smaller elements

License

MIT