Tailwind CSS自定义模糊动画失效，需为弹窗添加模糊动画

你的配置没生效主要有两个核心问题：一是模糊值变化幅度太小（2px到3px），肉眼几乎察觉不到；二是动画仅执行一次就结束，没有持续或保留状态的设置。下面是修正后的完整方案：

1. 修正tailwind.config.js配置 #

module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {
      keyframes: {
        // 扩大模糊值变化范围，让效果更易感知
        blur: {
          '0%': { filter: 'blur(0px)' },
          '50%': { filter: 'blur(4px)' },
          '100%': { filter: 'blur(0px)' },
        },
      },
      animation: {
        // 添加infinite让动画循环执行，也可替换为forwards保留结束状态
        'blur-pulse': 'blur 2s linear infinite',
      },
    },
  },
  plugins: [],
}

2. 在弹窗元素上应用动画类 #

给弹窗容器（或需要添加模糊动画的目标元素）加上自定义的动画类，示例如下：

<div className="modal-container animate-blur-pulse">
  {/* 弹窗内容 */}
</div>

额外注意事项 #

• 若要给弹窗背景加模糊动画，需将动画类单独加到背景元素上，同时确保背景元素尺寸足够覆盖目标区域
• 若需要动画执行一次后保持模糊状态，将infinite替换为forwards，并调整keyframes的结束值为你需要的模糊程度
• 可通过浏览器开发者工具检查元素的animation属性，验证Tailwind是否正确注入了自定义动画规则

内容的提问来源于stack exchange，提问作者Maytham mahdi