如何用Tailwind Typography和prose仅为当前hover的图片添加样式？

问题原因 #

你当前用的prose-img:hover:scale-[1.01]是Tailwind Typography的父元素状态变体，对应的CSS逻辑是：

.prose:hover img {
  transform: scale(1.01);
}

这意味着只要鼠标悬停在<article>的任意区域，所有内部图片都会触发缩放，而非仅当前悬停的单张图片。

解决方案 #

方案1：自定义Typography配置（推荐）

修改tailwind.config.js，直接给prose内部的img元素绑定自身hover状态的样式：

module.exports = {
  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            img: {
              width: '100%',
              borderRadius: '0.5rem',
              objectFit: 'cover',
              transition: 'all 500ms ease-out',
              '@screen md': {
                borderRadius: '0.75rem',
              },
              '&:hover': {
                transform: 'scale(1.01)',
              },
            },
          },
        },
      },
    },
  },
  plugins: [require('@tailwindcss/typography')],
}

然后简化<article>的类，移除所有prose-img-*前缀的样式：

<article class="prose">
  <!-- Markdown内容 -->
</article>

方案2：直接给图片加hover类（若能控制Markdown渲染）

如果你的Markdown渲染器支持为图片添加自定义类（比如MDX、Eleventy等），可以直接在Markdown里给单张图片绑定样式：

![示例图片](image-url.jpg){:class="w-full rounded-2xl object-cover transition-all duration-500 ease-out hover:scale-[1.01] md:rounded-3xl"}

同时将<article>的类简化为基础prose样式：

<article class="prose">
  <!-- Markdown内容 -->
</article>

关键说明 #

Tailwind Typography的prose-{element}:{state}语法是父级元素触发子元素样式，而非子元素自身状态触发。要实现单张图片hover生效，必须通过自定义CSS或直接给子元素加类的方式实现。

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