Overriding an css variable on tailwind v4

[yoann54]

I try to ovveride the --tw-prose-links variable that is set by the @tailwindcss/typography plugin, i tried to override it in @theme {} but it doesn't work. Is there a good way to do that ?

[wongjn]

You could use @utility like:

@utility prose {
  --tw-prose-links: …;
}

[yoann54]

thanks for your answer, works perfectly.

[kevinmu17]

This solution stopped working, it doesn't take precedence over the base typography setup. I don't now what changed here, but this should be the case if you setup your .css file like

@plugin "@tailwindcss/typography";
@utility prose {
    --tw-prose-body: var(--color-primary);
}

I would expect that my body color now honors --color-primary... (note, this worked before, versions: "@tailwindcss/typography": "^0.5.16", "tailwindcss": "^4.1.11")

[kevinmu17]

Oh, after some more debugging ( my case is more extended here )

@plugin "@tailwindcss/typography";
@utility prose {
    --tw-prose-body: var(--color-primary);
    & ul.checkmark {
        li {
            @apply relative pt-2;
        }
    }
}

The @apply rule here breaks everything, so if you expierience the @Utility isn't working this may be a case for you :)