如何用Tailwind CSS/ReactJS/TypeScript实现图片悬停取消模糊效果

你不需要引入额外库，用Tailwind CSS原生的状态变体就能实现这个效果。直接在图片的className里添加hover:blur-0类，就能让鼠标悬停时取消模糊：

<img
  src="/assets/images/wall1.png"
  alt="logo"
  className="hidden xl:block h-screen w-1/2 object-cover bg-no-repeat blur-md hover:blur-0"
/>

原理说明 #

Tailwind默认支持hover状态变体，hover:blur-0会在鼠标悬停时覆盖原本的blur-md类，将模糊值设为0，从而取消模糊效果。

如果你的项目里这个效果没生效，检查下Tailwind配置文件（tailwind.config.js），确保没有禁用hover变体——默认情况下它是启用的，不需要额外配置。

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