headings modifier does not work

[LaundroMat]

What version of @tailwindcss/typography are you using?

0.5.12

What version of Node.js are you using?

20.12.0

What browser are you using?

Firefox

What operating system are you using?

Windows

Reproduction repository

https://play.tailwindcss.com/YEWWnOKurk

Describe your issue

I'm trying to modify the color of headers, but changing that in the global CSS does not seem to apply changes to headers. It does work when applied to other elements though.

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  .prose {
    @apply prose-headings:text-mint_cream prose-p:text-mint_cream   }

  .prose-xl {
    @apply prose-headings:text-mint_cream prose-p:text-mint_cream   }
}

For a full example, see https://play.tailwindcss.com/YEWWnOKurk

[LaundroMat]

slaps forehead

That should have been @layer utilities

[adamwathan]

Hey! Does work but you are putting it in the base layer and the actual prose classes are in the components layer so the default colors are overriding your custom colors:

https://play.tailwindcss.com/kcqKpGnAU0?file=css

If it were me and I really wanted to do this in CSS I'd probably do it like this though:

https://play.tailwindcss.com/UXWROgOVcG?file=css

[LaundroMat]

Thanks for explaining this a little but further. As a follow up question: why would you do it the way you proposed?

[adamwathan]

That's the way color themes are defined:

https://github.com/tailwindlabs/tailwindcss-typography?tab=readme-ov-file#adding-custom-color-themes

So to me if you're going to do it in CSS that's by far the simplest approach, knowing as a maintainer all the gymnastics that happens with @apply under the hood when all you actually need to do is set a CSS variable 👍

[LaundroMat]

Thanks, I never considered I could use the same approach in CSS too :)

[vietvh-3042]

@LaundroMat
I am using this library with react-mark-down. I am trying to control it like this in global.css

@layer utilities {
  .prose {
    @apply prose-headings: text-white;
  }
}

However I am getting this error

 The `prose-headings:` class does not exist. If `prose-headings:` is a custom class, make sure it is defined within a `@layer` directive.

I am using Nextjs14 and NextUI, can you tell me how I need to handle it. Tks

[adamwathan]

Hey @vietvh-3042 — the problem in your case is the space between prose-headings: and text-white:

  @layer utilities {
    .prose {
-     @apply prose-headings: text-white;
+     @apply prose-headings:text-white;
    }
  }

[vietvh-3042]

@adamwathan It seems like prettier will reformat and have a space there. Is there a way to skip the format code for @apply prose-headings:text-white

[vietvh-3042]

@adamwathan How can I add other custom classes. I tried @apply prose-headings:text-white my-4; but it didn't work. :(