When using the Tailwind CSS
@tailwindcss/typography plugin, you can invert the colors by adding the
prose-invert class in addition to the
But I found that
prose-invert wasn’t working when I also added a custom grayscale color theme, like
prose-stone for “stone” gray colors rather than the default.
Eventually, I figured out that you have to make the
prose-invert class override everything else using the
<div class="prose prose-stone !prose-invert"></div>
! in front of the
prose-invert class allows it to not be overridden by the chosen gray scale (either
prose-stone), so the colors will stay inverted in a sort of “dark mode.”
I suspect this may be a bug with Tailwind Typography, but for now adding that exclamation mark fixes it.
Follow my twitter (@benborgers)
to see the work-in-progress of coding projects I’m working on!