a "&:hover" not being applied when extending config

[jpanther]

What version of @tailwindcss/typography are you using?

v0.5.0

What version of Node.js are you using?

v17.3.0

What browser are you using?

Safari and Firefox

What operating system are you using?

macOS

Reproduction repository

https://play.tailwindcss.com/Fq1bsNWhQm?file=config

Describe your issue

When using extend in the Tailwind config to customise the typography classes, the "&:hover" variants don't seem to be being applied in the browser. I've tried using the most basic example in the Tailwind docs and even that doesn't work.

module.exports = {
  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            color: '#000',
            a: {
              color: '#888',
              '&:hover': {
                color: '#FF0000',
              },
            },
          },
        },
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}

The "Read the docs →" link appears grey as expected, but should be red on hover.

Inspecting the CSS in the browser shows these styles exist, but when hovering they don't take precedence over the base color definition.

[alexanderbluhm]

@jpanther In the mean time you can also use something like prose-a:hover:text-[#b12868] which for me feels a bit more natural than extending the config.

[jpanther]

@alexanderbluhm Thanks, I haven't explored that method as yet... mainly because I have 60+ customisations in the config which makes it quite cumbersome to have to add them everywhere I'm using prose.

[btjanaka]

I've been working around this by adding !important, though for use cases more complicated than mine, that's sure to have unintended effects.

[rebelchris]

Following, guessing this is a bug in the latest version?

I assumed the tailwind config override was neater than applying it in each element that uses the prose class?

[sanderjn]

Seems like hover styles were removed with the introduction of CSS vars. When you look at the tailwindcss-typography/src/styles.js there is no mention of "hover" at all.

[sklawren]

Defining &:hover completely locks up the tailwind build process in Storybook, Gatsby, NextJS, etc.

It has taken me a long time to figure out this was the cause of tailwind locking up after I upgraded to Tailwind 3.

They provide this as an example in the docs, so it's supposed to be supported:
https://tailwindcss.com/docs/typography-plugin#customizing-the-css

For now, I've moved it to my tailwind.css

.prose {
  a {
    @apply hover:underline;
  }
}

@adamwathan This is a pretty serious bug. This completely locks up the tailwind build process. You can't even CTRL+C out. You have to close and reopen the terminal and then run ps aux | grep storybook to find and kill -9 the process (same with Gatsby, NextJS, etc.).

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

@jpanther this will be fixed by #246 and will be available in the next version.
@sklawren I tried to reproduce it with Next.js and it works just fine for me. Can you try and reproduce it and create a new issue with a reproduction attached to it? In the meantime, also try to remove your .next folder and restart your server.

[stevensacks]

@RobinMalfait It happens in both Storybook and Gatsby. The moment I remove the &:hover config, the problem goes away. If I add it back, it locks up and I have to kill -9 the process.