May 7, 2022
When using the Tailwind CSS @tailwindcss/typography
plugin, you can invert the colors by adding the prose-invert
class in addition to the prose
class.
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 !important
specificity:
<div class="prose prose-stone !prose-invert"></div>
Putting the !
in front of the prose-invert
class allows it to not be overridden by the chosen gray scale (either prose-slate
, prose-zinc
, prose-neutral
, or 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.
Tufts Meal Plan Wrapped
Mar 2, 2024
Building an e-ink picture frame that displays an iCloud photo album
Jan 9, 2024
2023 in review
Jan 5, 2024
Subscribe to my newsletter for a monthly round-up of new blog posts and projects I’m working on!